css flex 知乎,[CSS] flex布局

(1)兼容性

Chrome 21+

Opera 12.1+

Firefox 22+

Safari 6.1+

IE 10+

(2)弹性盒

容器设置：

display:flex;

display:inline-flex;

(3)容器属性

主轴方向：

flex-direction:row|row-reverse|column|column-reverse;

row：默认值，主轴为水平方向，从左到右

row-reverse：主轴为水平方向，从右到左

column：主轴为垂直方向，从上到下

column-reverse：主轴为垂直方向，从下到上

注：

与主轴(main axis)垂直的方向成为交叉轴(cross axis)

以下假设flex-direction:row;

item的换行方式：

flex-wrap:nowrap|wrap|wrap-reverse;

nowrap：默认值，item不换行

wrap：换行，向下换行

wrap-reverse：向上换行

item左右的堆积方式：

justify-content:flex-start|flex-end|center|space-between|space-around;

flex-start：默认值，item左对齐

flex-end：item右对齐

center：item左右居中

space-between：item两端对齐，item间隔相等

space-around：每个item两侧间隔相等

item的上下对齐方式：

align-items:stretch|flex-start|flex-end|center|baseline;

stretch：默认值，没有设置高度的item，将拉伸到容器高度(宽度)

flex-start：item上对齐

flex-end：item下对齐

center：item上下居中

baseline：item第一行文字的基线对齐

多根主轴的分布方式：

align-content:stretch|flex-start|flex-end|center|space-between|space-around;

stretch：默认值，每根主轴加起来占满高度(宽度)

flex-start：axis上对齐

flex-end：axis下对齐

center：axis上下居中

space-between：axis两端对齐，axis间隔相等

space-around：每两个axis上下间距相等

(4)item属性

顺序：数值越小排列越靠前，默认值为0

order:0|;

相对扩大比例：默认值为0，原始大小。如果每个都为1，则平分。如果有一个是2，则它是其他的2倍。

flex-grow:0|;

相对缩小比例：默认值为1，如果空间不足，等比缩小。如果有一个0，则它不变，其他等比缩小。

flex-shrink:1|;

原始大小：item原始占据的主轴宽度，浏览器根据它计算是否有多余空间，默认值为auto，即项目本来的大小。

flex-basis:auto|;

单独设置交叉方向的对齐方式：覆盖align-item属性

align-self:auto|flex-start|flex-end|center|baseline|stretch;