一篇文章弄懂Flex布局

转载地址
https://www.cnblogs.com/echolun/p/11299460.html
1.flex-direction属性

取值：row(默认) | row-reverse | column | column-reverse

用于控制项目排列方向与顺序，默认row，即横向排列，项目排列顺序为正序1-2-3；row-reverse同为横向排列，但项目顺序为倒序3-2-1。

column 与row相反，为纵向排列，项目顺序为正序1-2-3，column-reverse同为纵向排列，项目顺序为倒序3-2-1。

2.flex-wrap属性

取值：nowrap(默认) | wrap | wrap-reverse

用于控制项目是否换行，nowrap表示不换行；

举个例子：比如容器宽度为300px，容器中有6个宽度为60px的项目，nowrap情况下，项目会强行等分容器宽度从而不换行，那么项目实际宽度也就只有50px了，而非我们自己设置的60px。
wrap表示换行，即项目不会等分容器宽度，而是根据自身宽度进行排列，如果超出父容器宽度则自然换行。
wrap-reverse同样表示换行，需要注意的是第一排会紧贴容器底部，而不是我们想象的项目6紧贴容器顶部，效果与wrap相反
3.flex-flow属性

flex-flow属性是flex-deriction与flex-wrap属性的简写集合，默认属性为row nowrap，即横向排列，且不换行，如果需要控制项目排列与换行，推荐使用此属性，而非单独写两个。

4.justify-content属性

取值：flex-start(默认) | flex-end | center | space-between | space-around | space-evenly;

用于控制项目在横轴的对齐方式，默认flex-start即左对齐，center 为居中，对应的flex-end为右对齐。
space-between为左右两端对齐，即左右两侧项目都紧贴容器，且项目之间间距相等。
space-around为项目之间间距为左右两侧项目到容器间距的2倍，比较特别的布局，日常使用不太多。
space-evenly为项目之间间距与项目与容器间距相等，相当于除去项目宽度，平均分配了剩余宽度作为项目左右margin。
5.align-items属性

取值：flex-start | flex-end | center | baseline | stretch(默认)

用于控制项目在纵轴排列方式，默认stretch即如果项目没设置高度，或高度为auto，则占满整个容器，下面第一张图的项目没设置高度，其余图片中均为60px。
flex-start会让项目在纵轴紧贴容器顶部，flex-end与之相反：
center使用最多，自然不会陌生，在纵轴中心位置排列：
baseline比较特殊，它让项目以第一行文字的基线为参照进行排列：

6.align-content

取值：flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默认);

用于控制多行项目的对齐方式，如果项目只有一行则不会起作用；默认stretch，即在项目没设置高度，或高度为auto情况下让项目填满整个容器，与align-items类似。注意，如下演示的12个项目我均没有设置高度。
flex-start ，center，flex-end 与align-items属性表现一致：
space-around与justify-content保持一致，即项目之间间距为上下两端项目与容器间距两倍。
space-evenly同理，项目之间间距与项目到容器之间间距相等，space-between为上下两侧项目紧贴容器。
align-content其实也有baseline等其它可用值，表现与上面介绍过的属性一致，只是单行项目或多行项目的区别。