快速掌握flex弹性盒子布局

前言

网页布局（layout）是CSS的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

详解flex布局

其实，关于什么是flex布局、flex布局的一些基本概念、容器的属性和项目的属性，大家在菜鸟教程的Flex布局语法教程上都可以看到详细的解释，我就不一一说明了。大家在看完链接中的概念后，我再说说flex布局的一些注意点。
注意：一定要看懂flex布局的基本概念（容器、项目、主轴、交叉轴）后，在进行以下内容阅读。

写一个简单flex布局的步骤

1、设置flex容器（弹性盒子）

当我们需要容器内的元素按照百分比大小进行排列时，就需要对容器进行弹性处理。

<div class="d-flex">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

比如上面这个例子，一个div包含着3个元素div，现在我们希望里面的div能够以1：2：3的比例排列在同一行。第一步，对外部容器进行弹性布局处理（为了观察更加直观，给各个div做了边框处理）

.d-flex {
 	display: flex;	//弹性布局处理，该div成了弹性盒子
    border: 1px solid green;
}

.d-flex>div {
    border: 1px solid red;
}

观察到此时的子元素（项目）仍然是block元素，但是却失去了block元素独占一行的特性。就像被一个盒子包裹着，默认从左到右排列。

2、设置项目的大小比例

（1）默认占满整行的写法（项目使用flex-grow属性）

项目就是容器的子元素，现在我们希望里面的div能够以1：2：3的比例排列在同一行，并且占满整行。

.d-flex>div:first-child {
	flex-grow: 1;
}

.d-flex>div:nth-child(2) {
    flex-grow: 2;
}

.d-flex>div:last-child {
    flex-grow: 3;
}

这样，一个简单的弹性盒子模型就做好了。

（3）默认最多占满整行的写法（项目使用width属性）

.d-flex>div:first-child {
	width: 10%;
}

.d-flex>div:nth-child(2) {
    width: 20%;
}

.d-flex>div:last-child {
    width: 30%;
}

可以看出容器整行宽度默认100%，三个项目分别占10%，20%，30%，剩下40%的空间。
但是如果我们试着让项目总宽度超过100%，会发生什么情况？

.d-flex>div:first-child {
	width: 30%;
}

.d-flex>div:nth-child(2) {
    width: 60%;
}

.d-flex>div:last-child {
    width: 90%;
}

发现，容器内的项目并没有做换行处理，而是按照1：2：3（30%：60%：90%）的比例进行排列。

3、换行处理（响应式布局需要）

（1）设置容器换行（flex-wrap）

弹性盒子中的项目默认不换行，不论是使用flex-grow还是width，宽度只能占容器的100%，但是在某些情况下（比如响应式处理），需要我们做换行处理。所以盒子模型给我们一个flex-wrap属性，用于设置换行的方式。

.d-flex {
   display: flex;
    border: 1px solid green;
    flex-wrap: wrap; //正常换行
}

（2）设置项目宽度（width百分比）

容器设置flex-wrap: wrap后，项目设置flex-grow属性并不能导致换行，因为它默认容器宽度为所有项目宽度的总和。因此只能通过设置width属性进行换行处理。

.d-flex>div:first-child {
    width: 30%;
}

.d-flex>div:nth-child(2) {
    width: 60%;
}

.d-flex>div:last-child {
    width: 90%;
}

此时，各个项目的宽度超过100%时，不会再按照等比例进行压缩，而是正常地进行了换行处理。

4、调整容器内项目间距

justify-content属性定义了项目在主轴上的对齐方式。它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
space-evenly：每个项目两侧的间隔和项目之间的间隔都相等。
最经常使用的是space-between、space-around和space-evenly三个值。
（1）justify-content: space-around;时的间距实例

.d-flex {
    display: flex;
    border: 1px solid green;
    justify-content: space-around;
}

.d-flex>div {
    border: 1px solid red;
}

.d-flex>div:first-child {
    width: 30%;
}

.d-flex>div:nth-child(2) {
    width: 30%;
}

.d-flex>div:last-child {
    width: 30%;
}

（2）justify-content: space-between;时的间距

（3）justify-content: space-evenly;时的间距

5、盒子模型所有属性

（1）容器属性

flex-direction：决定主轴的方向（即项目的排列方向）
flex-wrap：一条轴线排不下，如何换行
flex-flow：flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
justify-content：定义了项目在主轴上的对齐方式
align-items：定义项目在交叉轴上如何对齐
align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

（2）项目属性

order：定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
flex：flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。