CSS - 弹性布局 - flex

兼容：不考虑IE以及低端安卓机(4.3-)

容器属性：

flex-flow、flex-direction、flex-warp

justify-content、align-items、align-content

元素属性：

order、flex-grow、flex-shrink

flex-basis、flex、align-self

一、flex弹性盒模型 display: fiex (parent)

1、弹性元素永远沿着主轴排列

2、一个元素既可以是弹性容器也可以是弹性元素

二、主轴 flex-direction (parent) 

1、设置主轴的方向

* row：左 -> 右

* column：上 -> 下

* row-reverse：右 -> 左

* column-reverse：下 -> 上

2、沿主轴排列处理 flex-wrap (parent)

* nowrap：不拆行，元素弹性伸缩

* wrap：折行

* wrap-reverse：反向折行

3、复合属性：flex-flow = flex-direction + flex-warp

三、元素弹性伸缩应对 child

1、 flex-warp: nowrap 时，容器宽度有剩余/不足，弹性元素可以使用以下属性：

* flex-shrink，考虑各个元素本身大小的情况下进行缩小，占满整个屏幕

* 有剩余宽度时，flex-shrink无效

* flex-grow，按各个元素声明的份数计算分配，叠加到原来的尺寸上

* 无多余宽度时，flex-grow无效

2、设置元素尺寸width、height，还有flex-basis，且和width/height同时设置时，flex-basis优先级更高，默认值为auto，此时如有width/height，则以设置的为准，否则容器大小根据内容撑开高度/宽度，其显示尺寸大小与主轴有关，即

flex-direction: column; 时，flex-basis就是元素的高度，反之亦然

3、复合属性： flex = flex-grow + flex-shrink + flex-basis 

四、容器内如何对齐

1、主轴上的对齐方式 justify-content (parent)

2、交叉轴上的对齐方式

* 单行对齐 ailgn-items

* 多行对齐 align-content

align-content和align-items类似，但是只有在容器开启换行生效，属性值上多了两个值

六、其他 order：更优雅的调整元素顺序，值越小越靠前，默认为0

七、总结

八、兼容性写法

.flex{　　

display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */

display: -moz-box; /* Firefox 17- */

display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */

display: -moz-flex; /* Firefox 18+ */

display: -ms-flexbox; /* IE 10 */

display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */

}

CSS - 弹性布局 - flex

原文：https://www.cnblogs.com/sunww/p/11281649.html