flex 布局，是一个广义的说法，不能说：加了 display:flex 就能够实现响应式布局，以 flex 属性为中心，还有一套全家桶等着你，家庭成员有：align-content、align-items、flex( flex-grow flex-shrink flex-basis )、flex-flow ( flex-direction flex-wrap )、justify-content、order 。
注意 3 个点：
- 多栏布局的 column-* 属性对弹性项目无效。
- float 与 clear 对弹性项目无效。（使用 float 只会使元素的 display 属性变成 block ）
- vertical-align 对弹性项目的对齐无效。
默认的
如果下级元素定义了长度，而且仅是对父元素添加 flex 属性，那么从左到右排序，有两种情况
1、子元素总长度小于父元素，空余的地方留空。
如下图
2、子元素总长度大于父元素，子元素原有设定的长度将失效，变成：
子元素长度 = 父元素长度 / 子元素个数。
如下图
flex-grow
默认值：0 ，
简写：flex: flex-grow flex-shrink flex-basis;
简要说明：用来占据你的绿~~
详细说明：用来对剩余长度占比的属性，前提子元素总长度小于父元素。
占比总长度 = 父元素长度 - 子元素长度*子元素个数
如下图，
绿色部分为占比总长度：
如果只有其中一个写了 flex-grow 属性，那么它的长度将会是：
这么长 = 占比总长度 / 你写的数值 + 本身长度。
如下图，只有区块 2 写了 flex-grow 的值：
它是这么来的，下图：
提示：flex-grow 的数值不能为负数，可以写小数，但不能写百分比。
注意：只有一个标签写了该属性时，数值 1 为占据 100% ，即每 0.1 占据 占比总长度的10% 长度。
flex-shrink
默认值：1 ，
简写：flex: flex-grow flex-shrink flex-basis;
简要说明：我越大，你们就越膨胀
详细说明：用来对超出部分的长度控制缩减的属性。当子元素的长度相加大于总长度时，才可以发生作用。
缩减总长度 = 子元素长度*子元素个数 - 父元素长度
如下图，虚线部分为缩减的总长度
那么它的长度计算是这么计算的：
这么长 = 当前元素设定元素的长度 - 缩减总长度 / 所有 shrink 值相加 * 当前元素的 shrink 值
示例，如下图区块 2 值为 3，区块 4 为 4，其它没写的区块默认为 1。
提示：flex-shrink 的数值不能为负数，可以写小数，但不能写百分比。
flex-basic
默认值： auto ，
简写：flex: flex-grow flex-shrink flex-basis;
简要说明：算了，先放着
详细说明：覆盖当前元素设定的长度(width)，重新定义当前元素的长度，前提是定义的长度值(basic)不能比当前字符串加起来的长度值小。
由下图可以看到，原字符长度为 86.33px ，如果设定宽度数值小于这个长度，还是这长度...
子元素全部按百分比的话，例如该百分比为18% ，那么子元素会是：
这么长 = 父元素的长度 * 18%。
如图： 800 * 18% = 144
如果只有其中一个写了 flex-basic 属性，并且还是百分比的话，那么当前元素会是：
这么长 = 父元素长度 / (当前子元素百分比 + (子元素设定长度 / 父元素长度 * ( 子元素个数 - 1 ) ) * 当前子元素百分比 ；
示例 1 、
示例 2 、区块 2 为 50% ，区块 4 为 100%，其他区块为 25% = 0.25 = 200 / 800 ，那么计算如图所示：
注意：flex-basic 的数值不能为负数。
flex-direction
默认值：row ，
简写：flex-flow: flex-direction flex-wrap;
简要说明：别跑，跟我走。
详细说明：规定子元素的展示方向，默认从左往右，自上往下。
如图，默认值 row 与 row-reverse , 方向完全反转了，起点和终点互换角色。
row 是从左往右，自上往下；row-reverse 是从右往左，自上往下。
属性影响
注意：有一个影响属性 direction ，该值会影响值 row 的方向，但对值 column 无影响。
如果设置了该属性将会有以下几种情况：
direction:ltr +--> flex-direction:row ------------->默认从左往右
direction:ltr +--> flex-direction:row-reverse ---->默认从右往左
direction:rtl +--> flex-direction:row ------------->将默认的从左往右变成从右往左
direction:rtl +--> flex-direction:row-reverse ---->将默认的从右往左变成从左往右
如图：
column 的值在于从上往下排序，column-reverse 方向与 column 方向相反，自下而上。
如下方，值 column 图例：
值 column-reverse 图例：
注意：float 对该值无效，值 column 将会令原有元素设定的高度失效，高度变为适用内容的高度。
flex-wrap
默认值：nowrap ，简写：flex-flow: flex-direction flex-wrap;
简要说明：后面排队的过来这儿(wrap)再排一行。
详细说明：默认的 flex 布局是不换行的，如果要换行，请用 flex-wrap 控制。
默认的，不换行的情况下，子元素超出父元素长度时，子元素的长度等于父元素除以子元素的个数，也就是说原有的设定的子元素宽度失效，而如果换行的情况下，子元素的设定宽度不会失效，子元素超出父元素长度时，将自上往下，从左往右的排序。
如图：设定子元素宽度为 200px ，父元素宽度为 800px;
默认值 nowrap 图例
值 wrap 图例
如果值为 wrap-reverse 那么它的顺序将会是自下往上，从左往右。wrap 与于 wrap-reverse 不同的是上下展示的方向的不同。
如下图：
flex-flow 其他情况图例
- flex-flow: column wrap; 下图 1
- flex-flow: column wrap-reverse; 下图 2
- flex-flow: row-reverse wrap; 下图 3
- flex-flow: row-reverse wrap-reverse; 下图 4
图 1 + 图 2
图 3 + 图 4
order
默认值：0
简要说明：给钱(integer)我，就让你排前面
详细说明：对当前项进行排序，当元素设定该值时，元素就位于该数值位置，同数值元素将按照文档读取顺序排序。
如图所示：指定了某些区块的 order 值。
注意：值可以接受负数但不能为小数点。
align-content
默认值：stretch
简要说明：单排的一边去
详细说明：对当前行所有子元素进行对齐，根据值进行位移，对单行所有子元素无效，对单个子元素设该属性无效。
注意：多考虑浏览器特性，部分浏览器不支持导致某些属性效果为 baseline 的效果。
如下图：默认子元素 200px * 6 ，宽度 900px ，高度 300px。
默认值 stretch 平分了父元素余下的高度，以平分的高度开始基线进行对齐，保证与下一行间隔一致，末行将与高度底部间隔。
注意：若其中某子元素未定义高度，它将会填满至下一行，无缝连接下一行。
值 baseline 图例
值 baseline 以元素高度为基准，在开始位置进行对齐，类似后面的 start 。值 first baseline 及 last baseline 估计还在实验中，并未得到实现。
值 center 图例
值 center 于 baseline 类似，不过它实现的是上下位置居中对齐。
值 flex-start 和 flex-end 图例
非溢出情况
溢出情况
值
flex-start 和
flex-end 为
以父元素高度的开始基线对齐和
以父元素高度的结束基线对齐（绕口，请看上方的溢出及非溢出图）。
貌似后面出的 start 及 end 测试有效，但 left 和 right 估计还在实验中，并未得到实现。
值 space-around 图例
值 space-around 平分了父元素余下的高度，并且在平分的高度中，上下位置居中对齐。
值 space-between 图例
值 space-between 首行元素粘合父元素开始基线，尾行元素粘合父元素结束基线，其余行平分剩下高度余下的值，并保证行之间距离一样。
值 space-evenly 图例
值 space-evenly 平分了父元素余下的高度，并保证每行间隔一样。
align-item
默认值 stretch
简要说明：来来来，我们一起膨胀
详细说明：对当前行的子元素进行对齐，可对单行进行赋值，但对单个子元素无效。
和 align-content 区别？align-item 是控制行内子元素对齐， align-content 是控制行对齐...
注意：多考虑浏览器特性，部分浏览器不支持导致某些属性效果为 baseline 的效果。
默认值 stretch 如下图：
值 baseline 图例
值 baseline ，以每行的间隔开始基线对齐，如不填写高度，将默认为内容高度。
值 center 图例
值 center ， 平分父元素余下的高度，并且每行自身上下间隔一样（以行内最大高度为基准），如不填写高度，将默认为内容高度。
值 flex-star 和 flex-end 图例
值 flex-star 和 flex-end , 平分父元素余下的高度，并且每行上(end)或下(start)间隔一样（以行内最大高度为基准），与后来的 start 及 end 貌似一样效果。
justify-content
默认值 stretch
简要说明：别惹事，站开点
详细说明：与 align-item 类似，不过它是用来对行内元素的水平对齐的控制。
注意：多考虑浏览器特性，部分浏览器不支持导致某些属性效果为 baseline 的效果。
默认值 stretch ，如下图：
与值 baseline ，貌似于默认值没区别。
值 center 图例
值 center ，集中所有子元素并水平居中对齐。
值 flex-star 和 flex-end 图例
值 flex-star 和 flex-end , 集中所有子元素并水平居左(start)或右(end)对齐。 与后来的 start 及 end 貌似一样效果。
值 space-around 图例
值 space-around ，水平分散对齐，并保证每个子元素自身的间隔一致。
值 space-between 图例
值 space-between ，水平分散对齐，首列粘合左边位置，末列粘合右边，其余列左右间隔对齐，并保持一致。
值 space-evenly 图例
值 space-evenly , 水平分散对齐，并保证每个元素间隔一致。
部分元素未得到测试，后续支持再添加。
完毕！
更多相关内容参考：
https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://developer.mozilla.org/zh-CN/docs/Web/CSS/align-items
http://www.css88.com/book/css/properties/flex/flex.htm
http://www.runoob.com/w3cnote/flex-grammar.html
乾坤文说
评论 (0)