flex布局快速上手

参考博文
做了一些筛选和概括,只归纳了简单的部分

首先给父元素添加display:flex
然后设置父元素flex的属性:

1.flex-direction确定排列顺序
row（默认）：从左到右
row-reverse：右到左
column：上到下
column-reverse：下到上

2.flex-wrap确定换行
Nowrap(默认):不换行,内容超过屏幕尺寸会被挤压
Wrap:正常换行,第一行在上面
Wrap-reverse:换行,每一行的内容顺序不变化,第一行位于容器底部,倒序排列

*flex-flow为direction + wrap 可写为 flex-flow: row nowrap

以下内容以常见默认row类型为例
3.justify-content
控制内容在容器内的位置,方向与direction的排列方向一致
flex-start（默认值）:左对齐,对准容器左上角
flex-end:右上角
Center:在顶部居中
space-between:使内容充满容器,中间自动间隔,每个间隔相等
space-around:比between增加了与容器边缘的间隔,为内容间隔的1/2

4.align-items
方向与direction的排列方向垂直
flex-start：左上角
flex-end：左下角
center：左中央
baseline: 与第一行文字的基线对齐
stretch（默认值）：如果内容没有设置高度或设为auto，将占满整个容器

5.align-content
可用于多行,只有一行时不起作用,与justify-content较为类似,因为是快速上手所以这里暂且不讲

子元素属性:
1.Order
默认值为0,若手动设置数字,则数字越小,排列越靠前(可以是负数

2.align-self
与align-items属性相似,控制单一子元素的位置

3.flex-grow
控制元素行内缩放(不改变高度),1为默认填满,如果放大后宽度超过容器,则自动挤压,不会换行;
如果每个元素都设置,则数字为2的元素会比1的元素占剩余空间大一倍

4.Flex-shrink
控制元素缩小,默认为1无负值,设置为0则空间不足时该元素不会被挤压

5.flex-basis定义主轴空间,此处暂不讲

*flex为flex-grow, flex-shrink 和 flex-basis的合写,默认为0, 1, auto
设为flex布局后,子元素的float、clear和vertical-align属性将失效