cssflex弹性布局详解案例基础布局
html
<ul class="box">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
css
.box{
display: -webkit-flex;
display: flex;
}
.item{
width: 200px;
height: 300px;
background: red;
border: 1px solid #ccc;
font-size: 50px;
text-align: center;
line-height: 300px;
color:#fff;
}
因为flex主要⽅便与移动端布局，所以测试以⾕歌模拟移动端看效果：
因为使⽤ flex 布局，⼦元素默认是横向排列，所以不需要float，也不起作⽤；
⽗盒⼦属性探究
flex-direction
flex-direction 表⽰⼦元素的排列⽅向和顺序；默认 row （横排，左到右）； row-reverse 表⽰横排右到左.box{
display: -webkit-flex;
display: flex;
flex-direction:row-reverse;
}
如果每个把每个 li 设置为 width：3000px;(当前屏幕宽度980px)，效果：
⼦元素宽度超出，不但没有换⾏，会⾃动适应⼤⼩，平分为 25%；
上⾯的平分只是在 row 的时候会平分，如果是换成竖向排列：
flex-direction: column;
元素不会被挤压了，拥有3000px宽；但是要注意，它不是因为不够空间⽽换⾏了，只是column 值规定了它竖向排列
下⾯的值可以调整为倒序竖向排列
flex-direction: column-reverse; //表⽰元素竖直反向排
flex-wrap
flex-wrap 默认 nowrap：不换⾏。上⾯的3000px ⼦元素正是因为这个竖向默认是不会换⾏的，所以上⾯设置3000px宽，不会换⾏；
同样的代码，如果加多⼀句
.box{
display: -webkit-flex;
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;    //换⾏，第⼀⾏在上⽅。
}
可以发现，设置为可以换⾏以后，⼦元素宽度变为100%屏幕宽了；这就像⼀个弹性盒⼦塞到了⽐⾃⼰⼩的盒⼦中，弹性盒⼦⾃动收缩了⾃⼰的宽度。
如果这样写：
.box{
display: -webkit-flex;
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap-reverse;    //换⾏，第⼀⾏在下⽅。
}
flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
flex-flow：row wrap  ===  flex-direction:row; flex-wrap: wrap
代码⼜改⼀下：
.box{
display: -webkit-flex;
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap-reverse;
}
可以写成
.box{
display: -webkit-flex;
display: flex;
flex-flow:row-veverse wrap-reverse
}
justify-content
它有五个值，其中如果把 item ⽐做word⽂档的⽂字的话, flex-star 可以看做是左对齐， flex-end：右对齐； flex-center：居中；
重点介绍值 space-around：平分内容空余空间，每个项⽬两侧的间隔相等;
设空余空间为 area，有⼦元素 k个，每个⼦元素等于增加了多少margin？==> area/2k
本例⼦：
.item{
width:200px;
}
.box{
flex布局对齐方式
display: -webkit-flex;
display: flex;
justify-content: space-around;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。