Flex布局

一、简介

flex 布局意为弹性布局，也称弹性盒子，任何容器都可以指定为 flex 布局。

相比于传浮动、padding、margin、position 等布局，flex 布局更加灵活，更加强大，也更容易实现自适应，同时也可以做到很好的兼容性，当然，这并不是说 flex 可以取代其它布局，只是在可以使用 flex 时候，更加推荐使用 flex 布局。

二、基本属性

在使用任何样式之前，html 中的盒子会按照 块级元素、行内元素 去布局，但是当给一个容器指定 display: flex 后，在它容器内的元素将会按照 flex 属性去布局，印象中的 块级元素、行内元素 布局规则将不再适用。

flex 的所有属性都必须在 flex 容器中才会生效，将元素改为 flex 容器 很简单，只要添加以下样式即可

display: flex;

flex 是按照主轴和交叉轴去排列的，默认情况下主轴为 水平方向（ x 轴），交叉轴为 垂直方向（ y 轴）

1. flex-direction

flex-direction 属性决定主轴方向和起点位置，它有以下 4 个值

• row：主轴为水平方向，起点在左侧（默认值）
• row-reverse：主轴为水平方向，起点在右侧
• column：主轴为垂直方向，起点在顶部
• column-reverse：主轴为垂直方向，起点在底部

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

2. flex-wrap

flex 容器默认不换行，如果一行放不下，会直接溢出，flex-wrap 属性可以控制元素是否可以换行

• npwrap：不换行（默认值）
• wrap：换行，第一行在顶部
• wrap-reverse：换行，第一行在底部

// 不换行
flex-wrap: npwrap;

// 换行，第一行在顶部
flex-wrap: wrap;

// 换行，第一行在底部
flex-wrap: wrap-reverse;

3. justify-content

元素在主轴方向的对齐方式，也就是控制左对齐、右对齐、居中对齐、分布对齐等，当然，这是在主轴上的对齐方式，而主轴不一定是水平方向，也可能是垂直方向

• flex-start：左对齐（默认值）
• flex-end：右对齐
• center：居中对齐
• space-between：两端对齐，每个容器之间的间距相等，最边上两端不留空
• space-around：两对对齐，每个容器左右间隔相等，所以相邻容器的间隔是双倍

4. align-items

控制元素在交叉轴上的对齐方式

• stretch：占满整个容器（默认值）
• flex-start：起点对齐
• flex-end：终点对齐
• center：居中对齐
• baseline：文字基线对齐

5. order

控制元素的排列顺序，数字越小，越靠前，默认值为 0

order: 0;

6. flex-grow

当存在剩余空间时，元素是否自动放大，如果放大，放大多少，取值范围是 大于等于 0 的整数，默认值为 0 不放大，数值越大，放大越多，但最大也不会超过剩余空间

如果所有元素都默认为 0，仅有一个元素设置为 1 或者更大，则该元素会最大化占据剩余空间

flex-grow: 0;

// 简写
flex: 0,

7. flex-shrink

当存在剩余空间时，元素是否自动缩小，如果缩小，缩小多少，取值范围是 大于等于 0 的整数，默认值为 1 ，空间不足时，会自动缩小，数值越大，缩小越多，为 0 时不缩小

flex-shrink: 1,

8. flex-basis

项目默认占据的主轴空间，类似于 width、height，主轴在水平方向时等同于 width，主轴在垂直方向时等同于 height，默认值为 auto （根据内容决定），也可以设置为具体像素值，取值范围同 width、height

// 默认值
flex-basis: auto;

// 主轴空间为100px
flex-basis: 100px;

9. flex

flex 属性是 flex-grow、flex-shrink、flex-basis的简写，默认值为 0 1 auto，不用一次性写全3个属性，写几个就有几个生效，但顺序不能错，此外该属性还有两个快捷值

flex: 0 1 auto;

// 等同于 1 1 auto
flex: auto;

// 等同于 0 0 auto
flex: none;  

10. algin-self

指定某个元素单独布局方式，如果有相同属性不同值，该值可覆盖之前的值

三、常见布局案例

注意：以下案例属性皆设置在父容器上，容器内的元素会按照指定布局去排列

1. 垂直水平居中

display: flex;
justify-content: center;
align-items: center;

2. 文字基线对齐

display: flex;
align-items: baseline;

3. 水平居中

display: flex;
align-items: center;

4. 垂直居中

display: flex;
justify-content: center;