flex布局总结

flex布局总结

一直在用 flex 但一直没总结，在此留做笔记

一、父项常用参数【前提设置display:flex】

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

下面介绍一下6大属性

1、flex-direction属性

（1）row（默认值）：主轴为水平方向，起点在左端。

• 排序【1 2 3 4】

（2）row-reverse：主轴为水平方向，起点在右端。

• 排序【4 3 2 1】

（3）column：主轴为垂直方向，起点在上沿。

同理 竖过来的 1，2，3，4

（4）column-reverse：主轴为垂直方向，起点在下沿。

2、flex-wrap属性

（1）nowrap（默认）：不换行。

• 当内宽度总和>外宽度时 内部元素的宽度会被挤压变小

（2）wrap：换行，第一行在上方。

（3）wrap-reverse：换行，第一行在下方。

3、flex-flow 属性

【flex-flow】 = 【flex-direction】+【flex-wrap】

将1与2结合的简便写法 例如：

flex-flow: row nowrap;
      ||
flex-direction:row;
flex-wrap:nowrap;

4、 justify-content 属性

显而易见 就是内容的位置

（1）flex-start（默认值）：左对齐

• 居左

（2）flex-end：右对齐

• 居右

（3）center： 居中

• 居中

（4）space-between：

• 两端贴边，之间的间隔都相等。n-1个间隙 【看5的图】

（5）space-evenly:

（6）space-around：每个项目两侧的间隔相等。【类似5】

5、align-items 与align-content属性

（1）stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

（2）flex-start：交叉轴的起点对齐。

（3）flex-end：交叉轴的终点对齐。

（4）center：交叉轴的中点对齐。

（5）baseline: 项目的第一行文字的基线对齐。

align-content属性值：

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

二、子项常用参数【前提父项设置display:flex】

1、flex-grow

默认值为0

所有项会照 flex-grow 值进行，按其比例等分

• 当设置前三项 flex-grow 为 1 最后一个为3时

• 会自动计算 总和6 分别为 1/6 1/6 1/6 3/6

2、flex-shrink属性

默认值为1

当在一行时 每一项都会被压缩

但若一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，该项不缩小。

3、flex属性

默认值为 0 1 auto

flex属性是flex-grow, flex-shrink 和 flex-basis的简写