Flex布局——色子的小案例
2016-11-12 11:33
363 查看
制作色子,即制作相对应的1-6的几个点
1、运用知识点
a、容器——container
b、项目——item
代码示例:
<div class="container">
<div class="item"></div>
</div>
2、主要采用上述两个的属性值进行编辑
例如:flex-direction方向——row、column、row-reverse、column-reverse
jusitfy-content:center——水平居中
flex-wrap:wrap——允许换行
align-items:center——表示对角方向居中(三点时)
align-self:flex-end/start——要覆盖前边的align-items(四点时)
等等。
3、相应的实现代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.container{
display: flex;
padding: 10px;
width: 120px;height: 120px;
border: 3px solid #ddd;
border-radius: 10px;
background: #fff;
box-shadow: 3px 3px 3px 0px #999;
margin: 5px;
}
.item{
width: 50px;height: 50px;
background: #999;
border-radius: 50%; /*可以绘制成一个圆形*/
box-shadow: 1px 1px 2px 0px #999;
}
.one{
justify-content: center; /*水平居中*/
align-items: center; /*交叉轴——垂直居中*/
}
.two{
justify-content: space-around;
align-items:center;
}
.two1{
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.three{
flex-direction: column;
justify-content: space-around;/*主轴方向上分散的对齐*/
align-items: center;
}
.three div:first-child{
align-self: flex-start; /*覆盖前边的align-item:center;*/
}
.three div:last-child{
align-self: flex-end;
}
.four{
flex-wrap: wrap; /*表示允许换行*/
}
.four .item{
margin: 7px; /*设置margin间距变大,即符合换行的条件*/
}
.four1,.five,.six{
flex-direction: column;
justify-content: space-around;
}
.four1 >div,.five >div,.six >div{
display: flex;
justify-content: space-around;
}
</style>
</head>
<body>
<div class="container six">
<div><!--第一行-->
<div class="item"></div>
<div class="item"></div>
</div>
<div><!--第二行-->
<div class="item"></div>
<div class="item"></div>
</div>
<div><!--第三行-->
<div class="item"></div>
<div class="item"></div>
</div>
</div>
<div class="container five">
<div>
<div class="item"></div>
<div class="item"></div>
</div>
<div>
<div class="item"></div>
</div>
<div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
<!--在container里边进行嵌套,container本身是一个容器,它有两个项目,同时这两个项目本身也是一个容器-->
<div class="container four1">
<div><!--第一行-->
<div class="item"></div>
<div class="item"></div>
</div>
<div><!--第二行-->
<div class="item"></div>
<div class="item"></div>
</div>
</div>
<!--<div class="container four">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>-->
<!--
<div class="container two">
<div class="item"></div>
<div class="item"></div>
</div>
-->
<div class="container three">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container two1">
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container one">
<div class="item"></div>
</div>
</body>
</html>
1、运用知识点
a、容器——container
b、项目——item
代码示例:
<div class="container">
<div class="item"></div>
</div>
2、主要采用上述两个的属性值进行编辑
例如:flex-direction方向——row、column、row-reverse、column-reverse
jusitfy-content:center——水平居中
flex-wrap:wrap——允许换行
align-items:center——表示对角方向居中(三点时)
align-self:flex-end/start——要覆盖前边的align-items(四点时)
等等。
3、相应的实现代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.container{
display: flex;
padding: 10px;
width: 120px;height: 120px;
border: 3px solid #ddd;
border-radius: 10px;
background: #fff;
box-shadow: 3px 3px 3px 0px #999;
margin: 5px;
}
.item{
width: 50px;height: 50px;
background: #999;
border-radius: 50%; /*可以绘制成一个圆形*/
box-shadow: 1px 1px 2px 0px #999;
}
.one{
justify-content: center; /*水平居中*/
align-items: center; /*交叉轴——垂直居中*/
}
.two{
justify-content: space-around;
align-items:center;
}
.two1{
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.three{
flex-direction: column;
justify-content: space-around;/*主轴方向上分散的对齐*/
align-items: center;
}
.three div:first-child{
align-self: flex-start; /*覆盖前边的align-item:center;*/
}
.three div:last-child{
align-self: flex-end;
}
.four{
flex-wrap: wrap; /*表示允许换行*/
}
.four .item{
margin: 7px; /*设置margin间距变大,即符合换行的条件*/
}
.four1,.five,.six{
flex-direction: column;
justify-content: space-around;
}
.four1 >div,.five >div,.six >div{
display: flex;
justify-content: space-around;
}
</style>
</head>
<body>
<div class="container six">
<div><!--第一行-->
<div class="item"></div>
<div class="item"></div>
</div>
<div><!--第二行-->
<div class="item"></div>
<div class="item"></div>
</div>
<div><!--第三行-->
<div class="item"></div>
<div class="item"></div>
</div>
</div>
<div class="container five">
<div>
<div class="item"></div>
<div class="item"></div>
</div>
<div>
<div class="item"></div>
</div>
<div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
<!--在container里边进行嵌套,container本身是一个容器,它有两个项目,同时这两个项目本身也是一个容器-->
<div class="container four1">
<div><!--第一行-->
<div class="item"></div>
<div class="item"></div>
</div>
<div><!--第二行-->
<div class="item"></div>
<div class="item"></div>
</div>
</div>
<!--<div class="container four">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>-->
<!--
<div class="container two">
<div class="item"></div>
<div class="item"></div>
</div>
-->
<div class="container three">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container two1">
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container one">
<div class="item"></div>
</div>
</body>
</html>
相关文章推荐
- flex布局实现色子
- JavaScript - flex布局测试案例【flex】主轴方向
- js - flex布局测试案例:完美居中
- Flex布局做出自适应页面--语法和案例
- flex 常见布局 案例
- flex布局入门案例(学习笔记20171022001)
- 从零开始 React Native(8) flex布局_常用控件案例
- flex布局
- flex布局中flex-basis|flex-grow|flex-shrink
- Flex 布局教程:语法篇
- 微信小程序的flex布局
- Flex 布局
- flex布局兼容
- 使用css中的flex布局弹性手风琴效果
- Flex布局display:(-webkit-)flex;
- [置顶] flex布局文本不换行不显示省略号的解决方法
- Flex布局新写法兼容写法详解
- React Native FlexBox布局(二) 应用篇
- 粘性定位position:sticky用法,手机移动设备:flex布局
- flex布局