逆战班——弹性盒子学习总结
逆战班——弹性盒子总结
CSS3 弹性盒子（ Flexible Box 或 flexbox是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
弹性盒子由**弹性容器(Flex container)和弹性子元素（flex item）**两部分组成。
弹性容器通过设置display：flex将其定义为弹性容器，里面可包含一个或多个弹性子元素。
弹性盒子根据子元素布局排列方向分为主轴和侧轴，默认布局方向为“row”——水平方向，则水平为主轴，垂直为侧轴，如果使用flex-direction:column改变布局方向为”colume“——垂直方向，则垂直为主轴，水平为侧轴。弹性盒子水平是主轴的时候：默认情况下，当宽高不写的时候，宽度由内容决定，高度由父容器决定。垂直是主轴的时候：默认情况下，当宽高不写的时候，宽度由父容器决定，高度由内容决定。
下图为水平方向为主轴的示意图：
水平的主轴（main axis）的开始位置（与左边边框的交叉点）叫做main start，结束位置叫做main end；
垂直的侧轴（cross axis）的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的侧轴空间叫做cross size。
添加在父容器上的语法
1.display : flex 用于定义该容器为弹性容器
2.flex-direction 用于指定子元素的布局方向
- row：默认值，子项显示为行
- row-reverse：子项显示为行。但方向和row属性值是反的
- column：子项显示为列
- column-reverse：子项显示为列，但方向和column属性值是反的
3.flex-wrap : 用于定义子项是否进行换行处理
- nowrap：默认值，不换行处理
- wrap ：换行处理
- wrap-reverse：反向换行
4.flex-flow : 是flex-direction和flex-wrap的复合写法：flex-flow: column wrap;
5.justify-content ：定义主轴方向上子项的对齐和分布方式
- flex-start ： 子项都去起始位置对齐
- flex-end ： 子项都去结束位置对齐
- center ： 子项都去中心位置对齐
- space-between : 表现为两端对齐。between是中间的意思，意思是多余的空白间距只在元素中间区域分配。
- space-around : around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半。
- space-evenly : evenly是匀称、平等的意思。也就是视觉上，每个flex子项两侧空白间距完全相等。
6.align-items：用于指定侧轴(垂直方向)上Flex子项的对齐方式
- stretch：拉伸的 （默认值）
- flex-start：起始位置对齐
- center：居中对齐
- flex-end：结束位置对齐
7.align-content : 跟justify-content相反的操作，是侧轴的对齐方式。(最少需要两行才能看出效果，因为他是多行的上下对齐方式)
- flex-start ： 子项都去起始位置对齐
- flex-end ： 子项都去结束位置对齐
- center ： 子项都去中心位置对齐
- space-between : 表现为两端对齐。between是中间的意思，意思是多余的空白间距只在元素中间区域分配。
- space-around : around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半。
- space-evenly : evenly是匀称、平等的意思。也就是视觉上，每个flex子项两侧空白间距完全相等。
添加在子元素上的语法
1.order : 排序，数字越小排的越靠前
2.flex-grow : 扩展 ( 想看到扩展的效果，必须有空隙 )
- 0 : 默认值 , 不去扩展
- 1 : 去扩展 , 会把空白区域全部沾满
注意：子元素会按照设置的比例值来分配空隙，如果比例值总和小于1，那么会有空隙，如果比例值总和大于等于1，那么就没有空隙，但是也不会撑出去。
3.flex-shrink : 收缩，默认值是1，0表示不收缩，0.5收缩小一些，2收缩大一些。（大小是跟正常缩放1进行比较的）
4.flex-basis : 跟flex-shrink/flex-grow类似，flex-shrink/flex-grow是设置一个比例值，flex-basis是设置一个具体值。
5…flex : 一种复合写法：flex-grow flex-shrink flex-basis
6.algin-self: 跟align-items操作很像，区别就是只是针对某一个子项。
以上是 逆战班——弹性盒子学习总结 的全部内容， 来源链接： utcz.com/a/59608.html
