弹性盒子模型

Web layout 是Web UI中的基础架构, 重要性不言而喻. 传统的盒模型, 借助display, position, float 属性应对普通布局游刃有余, 但针对复杂的或自适应布局, 常常捉襟见肘. 比如垂直居中, 就是一个老大难的问题, 借助flex弹性盒模型, 两行代码就可以优雅的实现之.

Flex

Flex即弹性盒模型, 该布局方案由W3C于2009年提出.

Flex布局使得子项目能够"弹性"的改变其高宽, 自由填充容器剩余空间, 以适应容器变大, 或者压缩子项目自身, 以适应容器变小; 同时还可以方便的调节子项目方向和顺序. flex常用于高宽需要自适应, 或子项目大小成比例, 或水平垂直对齐等场景.

Flex弹性盒模型里, 有容器和项目之分. 设置 display:flex的为容器, 容器内的元素称作它的子项目, 容器有容器的一套属性, 子项目有子项目的另一套属性. (可以这么理解: father作为弹性盒子, 制定行为规范, son享受盒子的便利, 按照规范划分各自的"辖区").

father制定的规范, 基于两个方向 — 水平和垂直.

• 水平方向的称之为主轴(main axis), 垂直方向的称之为交叉轴(cross axis).
• 主轴起始位置, 叫做main start, 末尾位置叫做main end;
• 交叉轴起始位置, 叫做cross start, 末尾位置叫做cross end.
• 子项目在主轴上所占的宽(高)度, 叫做main size, 在交叉轴上所占的高(宽)度, 叫做cross size.

属性

display: flex | inline-flex;(元素将升级为弹性盒子). 前者容器升级为块级盒子, 后者容器将升级为行内盒子. 元素采用flex布局以后, 子元素的float, clear, vertical-align属性都将失效.

容器属性

• flex-direction 指定主轴的方向.

flex-direction的值	描述
row(默认)	指定主轴水平, 子项目从左至右排列➜
row-reverse	指定主轴水平, 子项目从右至左排列⬅︎
column	指定主轴垂直, 子项目从上至下排列⬇︎
column-reverse	指定主轴垂直, 子项目从下至上排列⬆︎

• flex-wrap 指定如何换行.

                    flex-wrap的值       描述

                    nowrap(默认)      默认不换行

                    wrap                   正常换行

                    wrap-reverse      换行, 且前面的行在底部

• flex-flow 它是flex-direction 和 flex-wrap的简写形式, 默认值为row nowrap.
• justify-content 指定主轴上子项目的对齐方式.(通常为水平方向对齐方式

justify-content的值	描述(子项目--主轴方向)
flex-start(默认)	子项目起始位置与main start位置对齐
flex-end	子项目末尾位置与main end位置对齐
center	在主轴方向居中于容器
space-between	与交叉轴两端对齐, 子项目之间的间隔全部相等
space-around	子项目两侧的距离相等, 它们之间的距离两倍于它们与主轴起始或末尾位置的距离.

• align-items 指定交叉轴上子项目的对齐方式.(通常为垂直方向对齐方式)

align-items的值	描述(子项目—交叉轴方向)
flex-start	子项目起始位置与cross start位置对齐
flex-end	子项目末尾位置与cross end位置对齐
center	在交叉轴方向居中于容器
baseline	第一行文字的基线对齐
stretch(默认)	高度未定(或auto)时, 将占满容器的高度

• align-content 指定多根主轴的对齐方式. 若只有一根主轴, 则无效.

align-content的值	描述(子项目)
flex-start	顶部与cross start位置对齐
flex-end	底部与cross end位置对齐
center	在交叉轴方向居中于容器
space-between	与交叉轴两端对齐, 间隔全部相等
space-around	子项目两侧的距离相等, 它们之间的距离两倍于它们与主轴起始或末尾位置的距离.
stretch(默认)	多根主轴上的子项目充满交叉轴

子项目属性

子项目具有以下6个属性.

1. flex-grow 指定子项目的放大比例, 默认为0(即不放大). 该属性可取值为任何正整数. 假设各个子项目的放大比例之和为n, 那么容器内剩余的空间将分配n份, 每个子项目各自分到x/n份. (x为该子项目的放大比例)

2. flex-shrink 指定子项目的缩小比例, 默认为1. 设置为0时, 空间不足该子项目将不缩小. 我们知道, 容器的缩小总宽度=子项目所需要的总宽度-容器实际宽度, 假设容器需要缩小的宽度为W, 某子项目的默认宽度为L, 其缩小比例为p, 那么该子项目实际的宽度为L-p*W.

3. flex-basis 指定子项目分配的默认空间, 默认为auto. 即该子项目的原本大小.

4. flex 是 flex-grow, flex-shrink, flex-basis 3个属性的缩写. 默认为0 1 auto. 该属性取值为auto时等同于设置为1 1 auto, 取值为none时等同于设置为0 0 auto.

5. align-self 指定单个子项目独立的对齐方式. 默认为auto, 表示继承父元素的align-items属性, 如无父元素, 则等同于stretch. 该属性共有6种值, 其他值与上述align-items属性保持一致.

6. order 指定子项目的顺序, 数值越小, 顺序越靠前, 默认为0.

flex属性的优先级

我们可以给input设置flex:1, 使其充满一行, 并且随着父元素大小变化而变化. 也可以给div设置flex:1使其充满剩余高度.

使用flex布局这些都不是难事, 需要注意的是, 这其中有坑. 为了避免踩坑, 我们先来看下flex属性的优先级:

width|height > 自适应文本内容的宽度或高度 > flex:数值

这意味着, 首先是元素宽高的值优先, 其次是内容的宽高, 再次是flex数值. 现在我们来看看坑是什么.

1. 给input元素设置flex:1时需要注意, 通常input拥有一个默认宽度(用于展示默认数量的字符), 在chrome v55下, 这个宽度默认为126px(同时还包含2px的border). 因此想要实现input宽度自适应, 可以设置其width为0.
2. 给div元素设置flex:1时, 因div的高度会受子级元素影响, 为了使得该div占满其父元素剩余的高度, 且不超出, 建议将该div的height属性设置为0.