海阔天空

手机扫码查看

flex弹性布局

父容器

flex-direction 属性规定灵活项目的方向。
row 默认值。灵活的项目将水平显示，正如一个行一样
row-reverse 与 row 相同，但是以相反的顺序
column 灵活的项目将垂直显示，正如一个列一样
column-reverse 与 column 相同，但是以相反的顺序
initial 设置该属性为它的默认值
inherit 从父元素继承该属性

flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。。
nowrap 默认值。规定灵活的项目不拆行或不拆列。
wrap 规定灵活的项目在必要的时候拆行或拆列。
wrap-reverse 规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。

flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。
flex-flow 属性用于设置或检索弹性盒模型对象的子元素排列方式。
flex-direction 属性规定灵活项目的方向。
flex-wrap 属性规定灵活项目是否拆行或拆列。
flex-flow: flex-direction flex-wrap

justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
justify-content: flex-start|flex-end|center|space-between|space-around
flex-start 默认值。项目位于容器的开头
flex-end 项目位于容器的结尾
center 项目位于容器的中心
space-between 项目位于各行之间留有空白的容器内
space-around 项目位于各行之前、之间、之后都留有空白的容器内。
space-evenly flex子项两侧空白间距完全相等

align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
stretch 默认值。元素被拉伸以适应容器。如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制
center 元素位于容器的中心。弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）
flex-start 元素位于容器的开头。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界
flex-end 元素位于容器的结尾。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界
baseline 元素位于容器的基线上。如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。

align-content 属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。
使用 justify-content 属性对齐主轴上的各项（水平）。
stretch 默认值。每一行flex子元素都等比例拉伸。例如，如果共两行flex子元素，则每一行拉伸高度是50%
flex-start元素位于容器的开头
flex-end元素位于容器的结尾。
center居中对齐
space-between两端对齐
space-around每一行元素上下都享有独立不重叠的空白空间
space-evenly每一行元素都完全上下等分

子元素

order可以通过设置order改变某一个flex子项的排序位置，所有flex子项的默认order属性值是0
flex-grow属性中的grow是扩展的意思，扩展的就是flex子项所占据的宽度，扩展所侵占的空间就是除去元素外的剩余的空间间隙。默认值是0
flex-shrink属性中的shrink是收缩的意思，flex-shrink主要处理当flex容器空间不足的时候，单个元素的收缩比例，默认值是1
flex-basis定义了在分配剩余空间之前元素的默认大小
flex属性是flex-grow、flex-shrink、flex-basis的缩写
align-self控制单独某一个flex子项的垂直对齐方式