Flex布局入门总结

一、Flex布局是什么

Flex是Flexible Box的缩写，即“弹性布局”，用来为盒装模型提供最大的灵活性。

某个元素只要声明了display: flex;，那么这个元素就成为了弹性容器，具有flex弹性布局的特性，先看一张图，下文会详细介绍：

flex.jpeg

• 每个弹性容器都有两根轴：主轴和交叉轴，两轴之间成90度关系。注意：水平的不一定就是主轴。
• 每根轴都有起点和终点，这对于元素的对齐非常重要。
• 弹性容器中的所有子元素称为<弹性元素>，弹性元素永远沿主轴排列。
• 弹性元素也可以通过display:flex设置为另一个弹性容器，形成嵌套关系。因此一个元素既可以是弹性容器也可以是弹性元素。

弹性容器的两根轴非常重要，所有属性都是作用于轴的。下面从轴入手，将所有flex布局属性串起来理解。

二、Flex基本概念

flex.png

flex的核心概念就是容器和轴。容器包括父容器(flex container)和容器成员(flex item)，轴包括主轴(main axis)和交叉轴(cross axis)，主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

flex.jpg

三、容器的属性

容器的特点：父容器可以统一设置子容器的排列方式，容器成员(item)也可以单独设置自身的排列方式，如果两者同时设置，以容器成员(item)的设置为准。

3.1任何一个容器都能指定为Flex布局

.container {
  display: flex | inline-flex;   //有两种取值
}

块级元素使用flex，行内元素使用inline-flex。
注意：当设置 flex 布局之后，子元素的 float、clear、vertical-align 的属性将会失效。

3.2容器的属性

容器的属性(1).png

父容器有六种属性可以设置

1.flex-direction
2.flex-wrap
3.flex-flow
4.justify-content
5.align-items
6.align-content

3.2.1flex-direction: 主轴的方向(即项目的排列方向)

.container {
    flex-direction: row | row-reverse | column | column-reverse;
}

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

flex-direction-row.png

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

flex-direction-row-reverse.png

column：主轴为垂直方向，起点在上。

flex-direction-column.png

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

flex-direction-column-reverse.png

3.2.2flex-wrap: 容器内项目是否可换行

.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

默认值：nowrap 不换行，即当主轴尺寸固定时，当空间不足时，项目尺寸会随之调整而并不会挤到下一行。

flex-wrap-nowrap.png

wrap：项目主轴总尺寸超出容器时换行，第一行在上。

flex-wrap-wrap.png

wrap-reverse：换行，第一行在下。

flex-wrap-wrap-reverse.png

3.2.5flex-flow: flex-direction 和 flex-wrap 的简写形式

.container {
    flex-flow:  || ;
}

3.2.4justify-content：定义了项目在主轴的对齐方式

.container {
    justify-content: flex-start | flex-end | center | space-between | space-around;
}

默认值: flex-start 左对齐。

justify-content-flex-start.png

flex-end：右对齐。

justify-content-flex-edn.png

center：居中。

justify-content-center.png

space-between：两端对齐，项目之间的间隔相等，即剩余空间等分成间隙。

justify-content-space-between.png

space-around：每个项目两侧的间隔相等，所以项目之间的间隔比项目与边缘的间隔大一倍。

justify-content-space-around.png

3.2.5align-items: 项目在交叉轴上的对齐方式

.container {
    align-items: flex-start | flex-end | center | baseline | stretch;
}

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

align-items-stretch.png

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

align-items-flex-start.png

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

align-items-flex-end.png

center：交叉轴的中点对齐。

align-items-center.png

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

align-items-baseline.png

3.2.6align-content: 多根轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用

.container {
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

3.3Flex项目属性

有六种属性可运用在 item 项目上：
1.order
2.flex-basis
3.flex-grow
4.flex-shrink
5.flex
6.align-self

3.3.1order: 项目在容器中的排列顺序，数值越小，排列越靠前，默认值为 0，可为负值

.item {
    order: ;
}

order.png

3.3.2flex-basis: 在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间

.item {
    flex-basis:  | auto;
}

flex-basis.png

当主轴为水平方向的时候，当设置了 flex-basis，项目的宽度设置值会失效，flex-basis 需要跟 flex-grow 和 flex-shrink 配合使用才能发挥效果。

3.3.3flex-grow: 定义项目的放大比例

.item {
    flex-grow: ;
}

flex-grow.png

默认值为 0，即如果存在剩余空间，也不放大。

如果所有项目的 flex-grow 属性都为 1，将等分剩余空间。

当然如果当所有项目以 flex-basis 的值排列完后发现空间不够了，且 flex-wrap：nowrap 时，此时 flex-grow 则不起作用了，这时候就需要接下来的这个属性。

3.3.4flex-shrink: 定义了项目的缩小比例，负值对该属性无效

.item {
    flex-shrink: ;
}

默认值: 1，即如果空间不足，该项目将缩小。

flex-shrink.png

3.3.5flex: flex-grow, flex-shrink 和 flex-basis的简写

.item{
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

3.3.6align-self: 允许单个项目有与其他项目不一样的对齐方式

.item {
     align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

四、总结
关于flex的基本语法基本就是上面这些了，flex并不复杂，用起来也很方便，感兴趣的小伙伴可以好好看一下，如有错误或不严谨的地方，请务必给予指正！
更多属性参考：
[https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
代码地址：Github