flex布局总结

flex布局可以轻松实现元素的水平及垂直居中，还可以调整元素的顺序，而只需要设置简单的几个属性就可以达到非常好的效果，下面总结一下flex的一些属性，以便查询。

要用flex布局很简单，只需要设置display: flex或display: inline-flex，顾名思义，前者是块级元素，后者是内联元素，这是作用于父元素上的，个人觉得有点像表格一样，当元素设置display: table或者用表格标签时，内部的子元素的排列方式将发生变化，按照设计的布局进行渲染排列，设置display: flex后，子元素默认将会按照顺序一个个从左向右排列，默认在一行，如果子元素宽度和超过父元素宽度，元素宽度将自动压缩，当然这些都可以设置，后面会一一总结。值得注意的是，子元素排列有点像浮动元素，外边距会影响布局，并且如果有多行，则垂直外边距不会合并，当然元素换行时也不会“卡住”，因为行与行之间是独立的，高度取决于最高的元素，这一点又像表格的行一样。

首先看个基本的布局：

html:<ul class="flex-container">    <li class="flex-item">1</li>    <li class="flex-item">2</li>    <li class="flex-item">3</li>    <li class="flex-item">4</li>    <li class="flex-item">5</li>    <li class="flex-item">6</li></ul>css:.flex.container {    padding: 0;    margin: 0;    list-style: none;}.flex-item {    background: plum;    width: 200px;    height: 150px;    padding: 30px;    margin: 50px 50px;    font-weight: bold;    font-size: 3em;    line-height: 150px;    color: white;    text-align: center;}.flex-item:nth-of-type(odd) {    height: 100px;    line-height: 100px;}

毫无疑问效果如图：

设置display: flex后：

默认自动压缩，横向排列，不换行

容器属性

1、flex-flow

flex-flow是flex-direction和flex-wrap的简写形式，flex-direction规定排列方向，取值有row | row-reverse | column | column-reverse，即可以横向排列或纵向排列或反向，flex-wrap取值有nowrap | wrap | wrap-reverse，可以换行、不换行以及反向换行，如果行是从上往下排列，则反向换行则会把行从下往上排列。设置了换行后，当元素一行放不下，会自动换到下一行。所以设置了flex-flow: row wrap，效果如图：

2、justify-content

为了实现水平居中，只需设置justify-content，可取值有flex-start | center| flex-end | space-between | space-around，前三个分别代表靠左、居中、靠右，space-between表示等间距排列，最左边元素靠左，最右边元素靠右，space-around也是等间距排列，不同的是，两边的元素与父元素内容区边界的间距为中间间距的一半，如图为设置justify-content: space-around的效果图：

3、align-content

align-content与justify-content类似，不同的是他操作的对象是行，可以实现在纵向上，行与行之间的对齐方式，前提是父元素的高度固定，否则比起作用。取值有flex-start | center| flex-end | space-between | space-around | stretch，基本与justify-content取值相同，但多了一个stretch，它的意思是拉伸，可以这样理解每行的高度由子元素决定，设置了stretch后，高度将拉伸，这样每行的高度就都相同了，如图为设置父元素高度height: 800px并且align-content: stretch：

4、align-items

align-content只能设置行与行之间的对齐方式，要想设置各行内部子元素的垂直对齐方式，则需设置align-items，它的取值有flex-start | center | flex-end | stretch | baseline，即可设置靠上、居中、靠右、基线对齐以及拉伸，如图为居中对齐：

stretch可在元素高度不固定时拉伸，使其与行的高度相同。

子元素属性

5、order

order可以设置元素的排列顺序，初始值均为0，值越大，越靠后，order可为负值，如图把奇数项子元素的设置为order: -1：

6、flex

前面说过默认元素在一行且自动压缩，实际上是flex在起作用，它是flex-grow、flex-shrink、flex-basis的简写形式，flex-grow可以设置拉伸比例，flex-shrink设置压缩比例，这两个属性值都是数字，根据设置的值占和值的比例来确定子元素拉伸或压缩所占的比例，分配的量是行多余的宽度或溢出宽度的量，而分配的量又取决于行的宽度以及子元素的flex-basis值，即基准值，通过设置flex-basis可以设置子元素宽度值，默认为auto，即基准值默认为子元素宽度，假设多余宽度为120px，第一个子元素flex-grow: 1，第二个flex-grow: 2，第三个flex-grow: 3，则分别可分到1/(1+2+3)*120=20，2/(1+2+3)*120=40，3/(1+2+3)*120=60像素的宽，设置flex-grow: 0则不分配，默认flex值为0 1 auto，即只压缩不拉伸，如图为设置flex: 1 1 auto，可发现justify-content的值没什么用。

7、align-self

align-self可这是元素在一行中的垂直对齐方式，取值有auto | flex-start | flex-end | center | baseline | stretch如图为设置第一个子元素align-self: flex-start

总结：flex让布局更简单，有效运用可简化工作，当然它也有它的适用场景，另外只能在高版本的现代浏览器使用

参考文章：

1. Flexbox—快速布局神器
2. Flexbox详解