# Flex Box 弹性布局
# 一、简介
Flex Box模型，全称Flexible Box，意为弹性盒子，是CSS一种常见的布局方式。早期的盒模型布局方式有很多不足，非常不灵活，未能很好的解决许多网页内容布置的需求。Flex 布局的出现，使得 HTML 元素的布置更加灵活。它能有效计算元素间的间隙、距离等，并调整元素的对齐方式。现在 flex 布局已经得到了所有浏览器的支持，是解决布局问题和兼容问题和最好的方案之一。
容器默认存在两个轴：水平轴（main axis）和垂直轴（cross axis），项目默认沿主轴排列（水平轴）：
# 二、基本概念
开启 flex 布局的父元素视为容器（flex container），内部的子元素称为项目（flex item)。
flex 容器中有两条特殊的轴线，一条是主轴main axis，一条是交叉轴cross axis。在默认情况下，主轴即水平方向上的轴，交叉轴为竖直方向上的轴。
# 三、用法
在想要使用弹性布局的元素上添加 display: flex; 属性以开启。
<div class="container"></div>
.container {
display: flex;
}
2
3
于是我们得到了一个弹性布局的父元素作为容器，在里面就可以放置子元素作为项目进行布局了。 flex 布局的容器里面的项目会自动沿主轴方向布置。
# 四、属性
在开启 flex 布局后，我们就可以添加一些属性来使里面项目的布置符合我们的设计。容器和项目上均可以控制布局的样式，但两者所使用的属性并不相同。
容器上的属性通常为控制内部所有项目的共同属性。
# 父元素属性
容器常见的属性有：
- flex-direction
- flex-wrap
- justify-content
- align-items
# 1. flex-direction
flex-direction决定主轴的方向，而项目会沿容器的主轴方向分布，所以flex-direction决定了所有项目排列的方向：
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
2
3
flex-direction 有四个值
row：主轴水平方向，项目自左向右排列，为默认值。row-reverse：主轴水平方向，自右向左排列。column：主轴垂直方向，自上而下排列。column-reverse：主轴垂直方向，自下而上排列。
# 2. flex-wrap
flex-wrap决定项目是否换行：
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
2
3
nowrap：默认值，不换行。当主轴的长度是固定并且空间不足时，项目尺寸会随之进行调整，而不会换行。wrap：当本行/列项目的尺寸超出了容器的宽/高进行换行，新行在下。wrap-reverse：换行，新行在上。
# 3. justify-content
justify-content：元素在主轴方向上的对齐方式：
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evently;
}
2
3
flex-start：默认值，项目对齐主轴起点flex-end：项目对齐主轴终点center：项目在主轴上居中对齐space-between：项目在主轴上两端对齐，第一个项目对齐起点，末位项目对齐终点，中间的元素均匀分布。space-around：每个项目的间距相同，但是两倍于项目与容器边界的距离。space-evenly：每个项目的间距相同且等于项目与容器边界的距离，类似于两个子盒子的边界塌陷了。
# 4. align-items
align-item：元素在交叉轴上的对齐方式：
.container {
align-items: flex-start | flex-end | center | stretch | baseline;
}
2
3
flex-start：对齐交叉轴的起点flex-end：对齐交叉轴的终点center：在交叉轴上居中对齐stretch：默认值，弹性项包含外边距的交叉轴方向尺寸拉伸至容器的行高baseline：以元素的第一行文字的基线对齐
# 三、子元素属性
子元素的属性通常是关于该子元素在flex中的布局情况。
- flex-basis
- flex-grow
- flex-shrink
- align-self
- order
# 1. flex-basis
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间，浏览器会根据这个属性来计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。使用形式如下：
.item {
flex-basis: <length> | auto;
}
2
3
当主轴设置为水平时，当设置了 flex-basis，设置的项目宽度值会失效，flex-basis 需要跟 flex-grow 和 flex-shrink 配合使用才能生效。有两种特殊的值：
- 当
flex-basis值为 0 % 时，项目尺寸会被认为是0，因此无论项目尺寸设置多少都用； - 当
flex-basis值为 auto 时，则跟根据尺寸的设定值来设置大小。
# 2. flex-grow
flex-grow决定项目在主轴方向上所占比例，默认为0，即不放缩。
当容器中所有的项目都设置了flex-basis属性时，如果仍有是剩余的空间，设置的 flex-grow 属性才能生效。
如果所有项目的flex-grow属性都设置为1，那么它们会均分剩余的空间，如下图所示：
如果其中一个项目的flex-grow属性设置为2，其他均为1，那么它占据的剩余空间就是其他项目的两倍。
# 3. flex-shrink
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。不能设置负值，使用形式如下：
.item {
flex-shrink: <number>;
}
2
3
- 如果所有项目的 flex-shrink 属性都为 1，当空间不足时，都将等比例缩小
- 如果一个项目的 flex-shrink 属性为 0，空间不足时不缩小
# 4. align-self
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
2
3
这个属性和align-items属性的效果是一样的，只不过这个属性只对单个项目生效，而align-items是对容器中所有的项目生效。
# 6. order
order属性用来定义项目的排列顺序。数值越小，排列越靠前，默认为0。使用形式如下：
.item {
order: <integer>;
}
2
3
