CSS3弹性盒子布局(display：flex)
Posted two-fish
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3弹性盒子布局(display：flex)相关的知识，希望对你有一定的参考价值。
1.把大盒子叫“容器”，里面的小盒子叫“项目”，“容器”设置display：flex时，具有弹性盒子功能。
2.主轴和交叉轴
默认情况下，主轴和x轴相同，交叉轴和y轴相同。弹性盒子默认会按主轴x轴排列。
3. “容器”内的属性
（1）盒子内部具有flex特性
.container{display: flex}
（2）排列方向：flex-direction：row；（默认情况）
.container { flex-direction: row | row-reverse | column | column-reverse; }
注意：当x轴上排列时，子元素都是inline-block元素；当y轴上排列时，子元素都是block元素。
（3）是否换行：flex-wrap：nowrap；（默认所有子元素在一行排列）
.container{flex-wrap: nowrap | wrap | wrap-reverse;}
（4）flex-flow: <‘flex-direction’> || <‘flex-wrap’>，由flex-direction和flex-wrap两个属性复合的属性，默认是row nowrap。
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
（5）justify-content：默认值：flex-start；
比如：子元素自己的宽高生效，父级：justify-content：center；
<style>
.container{
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 400px;
height: 400px;
border: 1px solid black;
}
.item{
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
<body>
<!-- 容器 -->
<div class="container">
<!-- 项目 -->
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>（6）在侧轴上如何对齐：align-items：stretch（默认值） 注意：stretch值在有height值时，height值决定高度（7）align-content：stretch（默认值）
注意：当只有一行flex项时，此属性不起作用。
4. “项目”中的属性
注意：子级元素设置的宽是100px，但是盒模型的宽却是78px，要注意的是，width值的存在意义重大，尤其是计算布局时。
（1）order：number；该子级的先后顺序中排第几位
默认情况下，每一个子级按照标签的先后顺序在页面中布局，但是order可以改变子级在页面中的先后顺序。
（2）flex-grow：number；子级在该行中所占的剩余空间比例。
剩余空间：就是子级的原始盒模型（设置的border+padding+content值）要是没有剩余空间，该值是无效的
比如：.item:nth-of-type(5){ flex-grow: 2; }
（3）flex-shrink：number；每一行中，子元素按原始盒模型排列后，超出“容器”的部分，按照比例大小进行收缩（砍掉），每个子元素中该值越大，被砍掉的越多，默认值为1
比如：上面图片效果中，5个子元素的flex-shrink都是默认值1，所以，都被等比例的砍掉了一部分
（4）flex-basis：length | 0 | auto，（auto是默认值）
1）当值是：length长度的时候，它可以是长度（例如20％，5rem，10px等），flex-basis属性设置子元素的宽或高，当然width也是设置子元素的原始盒模型的宽，flex-basis值会替代width值
比如：第一个子元素设置：flex-basis：120px，那么第一个子元素的原始盒模型width = 120px，将剩余空间进行分配后，每个子元素的获得24.67的宽度2）那么当flex-basis：0时，相当于原始width的值是0；上述代码中的第一个子元素的flex-basis：0；
3）flex-basis：auto；默认值。
（5） flex: none | [ <\'flex-grow\'> <\'flex-shrink\'>? || <\'flex-basis\'> ]
这是速记flex-grow,flex-shrink和flex-basis组合。第二个和第三个参数（flex-shrink和flex-basis）是可选的。默认是0 1 auto
（6）align-self：允许子元素对容器的align-items属性进行覆盖设置
.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }
请注意float，clear、column、vertical-align等属性对弹性无效。
以上是关于CSS3弹性盒子布局(display：flex)的主要内容，如果未能解决你的问题，请参考以下文章