设置display:flex; display:inline-flex的元素称为flex容器,里边子元素称为flex子项
flex相关属性分为两部分,一部分作用在flex元素上,另一部分作用在flex子项上
一:
子项整体布局方向
flex-direction:row | row-reverse | column | column-reverse
二:
控制子项整体单行显示还是 换行显示
flex-wrap:nowrap | wrap | wrap-reverse
三:flex-flow:flex-direction和flex-wrap的缩写
flex-flow:flex-direction flex-wrap;
四:
水平方向子项对齐方式和分布
justify-content:flex-start | flex-end | center | space-between | space-around | space-evenly
space-between:左右两边对齐 中间间隔均匀分布
space-around:环绕的意思 每个子项都环绕互不干扰等宽的空白间距 视觉上两侧空白只有中间空白的一半
space-evenly:均分 每个flex子项空白间距相等
五:
子项垂直方向的对齐方式
align-items:stretch | flex-start | flex-end | baseline
stretch:子项拉伸 贯穿容器
baseline:所有子项相对于容器的基线对齐
六:
子项垂直方向每一行flex元素的对齐方式
align-content: stretch | flex-start | flex-end | center | space-between | space-around | space-evenly;
作用在flex子项上的css属性
1:order:改变子项的排序位置 默认为0 若想将某一子项设置在前 只需设置比0小的数字 若在后 则比0大即可
2:flex-grow:扩展 flex子项所占据的宽度 扩展所侵占的空间就是元素以外的空白间隙
flex-grow默认值为0 可以是小数不为负 所有剩余空间总量为1
3、flex-shrink:收缩 容器空间不足时 单个元素的收缩比例
默认值为1 不为负
4、flex-basis:分配剩余空间之前元素默认大小
flex-basis:length | auto;
5、flex:flex-grow flex-shrink和flex-basis的缩写
6、align-self:单独控制flex子项的垂直对齐方式
align-self:auto | flex-start | flex-end | center | stretch | baseline