共计 5455 个字符，预计需要花费 14 分钟才能阅读完成。
背景
我的强项是后端开发，很少波及前端开发，一个很重要的起因是前端布局太妖，要实现一个居中须要各种奇技淫巧，而且每个浏览器实现还不一样，前端的布局就像谜一样，你都不晓得为啥就能够了，也不晓得为啥就不行。直到 Flex 布局的呈现前端的布局终于有点章法了，第一次接触 Flex 布局是从阮一峰的博客 Flex 布局教程，阮一峰写博客的能力的确厉害，通俗易懂又直击要害，倡议想要入门 Flex 都去拜读一下。那么写这篇文章的目标是从一个后端的角度去看 Flex 布局，如果你看完阮一峰的博客后依然有一些疑难，那么能够读一读这篇文章。
Flex 基本概念
- 容器和我的项目
Flex 布局包含容器 (flex container) 和我的项目(flex item)，比方上面这段代码
<div class="content">
<div class="block"></div>
<div class="block"></div>
</div>content 这个 div 就是容器，block 的 div 就是我的项目
- 两轴两个方向
Flex 外围就是靠两根轴进行布局的调整，其实就是程度和垂直两个方向，只不过在 Flex 中程度方向称为主轴，垂直方向称为穿插轴，每个方向各有 start center end 三个方位，其实就是右边两头和左边三个方位。
容器属性
flex 有以下几个属性能够作用于容器上
- flex-direction
- justify-content
- align-items
- flex-wrap
- flex-flow
- align-content
咱们一个个来
flex-direction
flex-direction指定了 Flex 布局的方向，其实最外围就是指定了是横向排列还是纵向排列，flex-direction 有以下取值
- row（默认值）：横向排列
- row-reverse：反向横向排列
- column：纵向排列
- column-reverse：反向纵向排列
如下代码
<html>
<head>
<style>
.container {
display: flex;
background-color: aliceblue;
}
.box1 {
width: 80px;
height: 80px;
margin: 5px;
background-color: orange;
}
.box2 {
width: 40px;
height: 100px;
margin: 5px;
background-color: orange;
}
.box3 {
width: 100px;
height: 30px;
margin: 5px;
background-color: orange;
}
</style>
</head>
<body>
<div class="container" style="flex-direction: row">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
flex-direction: row 成果
flex-direction: row-reverse 成果
flex-direction: column 成果
flex-direction: column-reverse 成果
留神到无论是横向对齐（row）垂直方向默认顶部对齐，垂直对齐（column）默认对齐形式是左对齐
justify-content
justify-content 指定了程度方向的排列形式，留神这里我用的是排列形式不是其余中央说的对齐形式，因为我感觉排列这个词更适宜形容 justify-content，justify-content 能够取以下值：
- flex-start（默认值）：从左向右排列
- flex-end：从右向左排列
- center：居中排列
- space-between：两端对齐，我的项目之间的距离都相等。
- space-around：每个我的项目两侧的距离相等。所以，我的项目之间的距离比我的项目与边框的距离大一倍。
flex-start 从左向右排列
flex-end 从右向左排列
留神和 flex-direction: row-reverse 不同，row-reverse 对排列程序进行了反向
center 居中排列
space-between 两端对齐
space-around 每个我的项目两侧的距离相等
通过以上实例能够看出，用对齐来形容短少直观印象，用排列比拟适宜形容
align-items
align-items 指定了垂直方向的对齐形式，留神这里用的是对齐这个词，align-items 可取以下值：
- flex-start：顶部对齐
- flex-end：底部对齐
- center：居中对齐
- baseline: 我的项目的第一行文字的基线对齐。
- stretch（默认值）：如果我的项目未设置高度或设为 auto，将占满整个容器的高度。
flex-start 顶部对齐
flex-end 底部对齐
center 居中对齐
baseline 我的项目的第一行文字的基线对齐
为了展现 baseline 成果，咱们批改下代码
<div class="container" style="flex-direction:row;align-items: baseline;">
<div class="box1" style="font-size: 50px">1</div>
<div class="box2">2</div>
<div class="box3" style="font-size: 30px">3</div>
</div>
stretch 占满容器高度
如果未设置高度，将占满屏幕，咱们将 box 的 height 属性去掉
.container{
display: flex;
height: 100px;
background-color: aliceblue;
}
.box1 {
width: 80px;
margin: 5px;
background-color: orange;
}
.box2 {
width: 40px;
margin: 5px;
background-color: orange;
}
.box3 {
width: 100px;
margin: 5px;
background-color: orange;
}
flex-wrap
flex-wrap 指定了如果一行放不下该如何解决，取值如下：
- nowrap（默认）：不换行
- wrap：换行，接在第一行上面
- wrap-reverse：换行，接在第一行下面
咱们在下面的代码退出一个 box4
.box4{
width:600px;
height: 80px;
margin: 5px;
background-color: orange;
}
....
<div class="container" style="flex-direction:row;flex-wrap: wrap-reverse;">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>nowrap：不换行
flex 会强行放在一行，并且如果长度不够会压缩其余内容
wrap：换行，接在第一行上面
wrap-reverse：换行，接在第一行下面
flex-flow
flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写模式，默认值为 row nowrap。
.box {flex-flow: <flex-direction> || <flex-wrap>;}align-content
align-content 定义了当有多行的时候，每行之间该如何排列，取值如下
- stretch（默认值）：在垂直方向占满空间
- flex-start：每行排列在垂直方向顶部
- flex-end：每行排列在垂直方向底部
- center：每行排列在垂直方向两头
- space-between：每行在垂直方向两端对齐
- space-around：每行在垂直方向距离相等
stretch（默认值）：在垂直方向占满空间
咱们去掉每个 box 的高度，并且退出了一个新的 box5
<html>
<head>
<style>
.container{
display: flex;
height: 100%;
background-color: aliceblue;
}
.box1{
width:80px;
/* height: 80px;
*/ margin: 5px;
background-color: orange;
}
.box2{
width:40px;
/* height: 100px;
*/ margin: 5px;
background-color: orange;
}
.box3{
width:100px;
/* height: 30px;
*/ margin: 5px;
background-color: orange;
}
.box4{
width:600px;
/* height: 80px;
*/ margin: 5px;
background-color: orange;
}
.box5{
width:800px;
/*height: 50px;*/
margin: 5px;
background-color: orange;
}
</style>
</head>
<body>
<div class="container" style="flex-direction:row;flex-wrap: wrap;">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</div>
</body>
</html>肯定要用 flex-wrap: wrap; 不然无奈造成多行
flex-start：每行排列在垂直方向顶部
把高度加回去
能够看到容器底部还是留了一部分空间，高度依照配置的高度显示
flex-end: 每行排列在垂直方向底部
center：每行排列在垂直方向两头
space-between：每行在垂直方向两端对齐
space-around：每行在垂直方向距离相等
我的项目属性
我的项目属性蕴含以下 6 项
- flex-grow
- flex-shrink
- order
- flex-basis
- flex
- align-self
flex-grow
flex-grow 定义了当容器长度增长时容器内的我的项目该当如何变动，这里定义的是一个变动的权值，比方有两个我的项目，一个 flex-grow= 4 一个 flex-grow= 6 那么当容器长度增长 10 个像素时，第一个我的项目增长 4 个像素，第二个增长 6 个像素，这样当长度增长时可能填满整个空间。当然如果所有的我的项目 flex-flow 都一样那么将平分残余的空间。
<div class="container" style="flex-direction:row;">
<div class="box1" style="flex-grow: 1"></div>
<div class="box2" style="flex-grow: 2"></div>
<div class="box3" style="flex-grow: 3"></div>
</div>
如果 flex-flow 设置为 0（默认值）则不会主动增长
flex-shrink
flex-shrink 和 flex-grow 相同，flex-shrink 是当长度缩小时该如何压缩我的项目空间，也是定义权值
order
order 能够设置显示程序，如以下代码
<div class="container" style="flex-direction:row;">
<div class="box1" style="order: 3">1</div>
<div class="box2" style="order: 2">2</div>
<div class="box3" style="order: 1">3</div>
</div>
指定了 order 就按 order 指定的程序显示（这个属性的利用场景在哪？）
flex-basis
flex-basis 定义了我的项目在容器中的初始值，如果是程度方向那么就是长度，如果是垂直方向那么就是高度，默认是 auto 就是我的项目原大小，这个属性能够笼罩自身的 width 和 height
<div class="container" style="flex-direction:row;">
<div class="box1" style="flex-basis:400px"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
flex
flex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。
align-self
align-self 容许单个我的项目不一样的排列形式，能够笼罩 align-items 属性，后面提到过，align-items 定义了垂直方向的对齐形式
<div class="container" style="flex-direction:row;align-items: flex-start;">
<div class="box1"></div>
<div class="box2" style="align-self: flex-end;"></div>
<div class="box3"></div>
</div>
参考
这里有一个 Flex 游戏的站点，通过 24 个小游戏让你学会应用 Flex 相干属性