CSS学习笔记：flex布局
参考资料：https://www.bilibili.com/video/BV1N54y1i7dG?p=4
一、Flex布局简介
1. Flex布局的主要作用
flex布局是flexible布局的缩写，字面意思就是弹性布局，它主要的作用是使用它可以非常方便地对html上的元素进行水平排布。
当flex布局还没有出现的时候，我们希望对网页元素进行水平布局往往是需要采用浮动（float）来实现的，但使用浮动会带来许多意想不到的问题：例如元素脱离标准流而造成父盒子坍缩，后面排列的元素需要使用clear:both等方式消除浮动来避免前面浮动元素带来的影响等等，此外浮动也没有提供使水平排列的元素等分父盒子的功能，程序员手动编写这样的功能费时费力，使我们编写页面过程中出现了许多不必要的麻烦。
2. Flex布局应用场景
和前面所说的一样，Flex布局就是为了开发人员能够更简单地进行元素的排版而生的，可以看到，很多大网站上水平排布元素的方式都由float实现改成了flex实现，因而学习flex布局是有益且必要的。
b站的主页：
jetbrains官网：
从这些大网站上可以看出flex布局已经应用到了非常多的页面之上，熟练掌握Flex布局应该是当前前端开发人员的必备技能之一。
二、Flex布局的使用
1. Flex布局的两种相关元素
Flex布局中，有两种相关的元素，一个是父元素（flex-container），即用于存放被放置元素的容器，例如上面b站和jetbrains官网上包围住所有小项目的父级元素；二是子元素（flex-item），即希望被有条理放置的各个元素项（通常是水平排列），即上面b站的每个选项和jetbrains官网上的各个介绍卡片。
因为布局的结果和父元素和子元素都相关，因此，我们需要分别对父元素和子元素分别进行设置才能得到想要的结果。
2. 父项属性
| 属性 | 作用 |
|---|---|
| flex- direction | 设置主轴的方向 |
| justify-content | 设置主轴上的子元素排列方式 |
| flex-wrap | 设置子元素是否换行 |
| align-content | 设置侧轴上的子元素的排列方式(多行) |
| align-items | 设置侧轴上的子元素排列方式(单行) |
| flex-flow | 复合属性，相当于同时设置了flex-direction和flex-wrap |
2.1 flex- direction
在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x轴和y轴
- 默认主轴方向就是x轴方向，水平向右
- 默认侧轴方向就是y轴方向，水平向下
默认排列如下（从左到右）：
此时修改flex-direction属性为：
.flex-container {
display: flex;
flex-direction: column; /*竖直排列*/
...
}
其作用是修改主轴为y轴，因此元素竖直排列，效果如下：
flex- direction的所有取值和效果：
| 属性值 | 说明 |
|---|---|
| row | 从左到右（默认值） |
| column | 从上到下 |
| row-reverse | 从右到左 |
| column-reverse | 从下到上 |
2.2 justify-content
作用是设置主轴上的元素排列，具体效果如下：
| 常用属性值 | 说明 | 效果 |
|---|---|---|
| flex-start | 从轴的头部开始排列（默认值） |  |
| flex-end | 从轴的尾部开始排列 |  |
| center | 在主轴居中对齐 |  |
| space-around | 平分剩余空间 |  |
| space-between | 先两边贴边，再平分剩余空间 |  |
| space-evenly | 距离相等 |  |
2.3 flex-wrap
可以发现，如果上面的元素如果再增加一个，绿色的容器的第一行就无法再装下了，但事实是怎样呢？
可以发现，加入这个元素之后，这个元素并没有放置在下一行，而是挤在了第一行，此外所有元素的宽度都被压缩了。
原因：默认情况下，item都排在一条线( 轴线) 上。flex-wrap属性定义 , flex布局中默认是不换行的（flex-wrap默认值为no-wrap）。
当排不下需要换行时，设置flex-wrap: wrap即可：
.flex-container {
flex-wrap: wrap;
...
}
2.4 align-items
作用：设置侧轴上子元素的排列方式（单行）
| 属性值 | 说明 | 效果 |
|---|---|---|
| flex-start | 从上到下（默认值） |  |
| flex-end | 从下到上 |  |
| center | 挤到一起居中（垂直居中） |  |
| stretch | 拉伸（子元素不能设置高度） |  |
2.5 align-content
和align-items的作用非常类似，都是用于设置侧轴上子元素的排列方式，但align-content是用于设置多行子元素的排列（单行元素无效），并且还有侧轴两边贴边等的效果。
| 属性值 | 说明 | 效果 |
|---|---|---|
| center | 多行元素居中 |  |
| space-around | 平分剩余空间 |  |
| space-between | 先上下行贴边，再平分剩余空间 |  |
2.6 flex-flow
可以一次设置flex-direction和flex-wrap两个属性，如：
.flex-container {
flex-flow: wrap column;
}
3. 子项属性
| 属性名 | 作用 |
|---|---|
| flex | 子项目占的份数 |
| align-self | 控制子项自己在侧轴的排列方式 |
| order | 属性定义子项的排列顺序(前后顺序) |
3.1 flex
flex属性定义子项目分配剩余空间，用flex来表示占多少份数。
语法：
.item {
flex: <number>;
}
案例：模拟京东商城的搜索栏，即左右两个部分的宽度固定，而中间的宽度自适应。
<div class="flex-container">
<div></div>
<div></div>
<div></div>
</div>
.flex-container {
...
display: flex;
}
.flex-container > div:nth-child(1) {
width: 100px;
height: 100%;
background-color: plum;
}
.flex-container > div:nth-child(2) {
background-color: salmon;
flex: 1; /*这里取了全部的剩余空间*/
}
.flex-container > div:nth-child(3) {
width: 100px;
height: 100%;
background-color: #6ad281;
}
效果：
因为div1和div3分别占用了100px的宽度，而div2使用flex占据剩余空间，因此div2就占据了中间所有的空间。
此时改变页面的宽度，可以发现中间部分会自适应变化，而两边宽度不变。可见，使用flex布局非常容易就可以实现圣杯布局的核心部分。
因为flex可以按比例分，因此我们可以摆脱使用百分比分配的困扰：
.flex-container > div:nth-child(1) {
flex: 1;
background-color: plum;
}
.flex-container > div:nth-child(2) {
flex: 1;
background-color: salmon;
}
.flex-container > div:nth-child(3) {
flex: 2;
background-color: #6ad281;
}
效果如下：
可以看到紫色和橙色各占用一份空间，而绿色占用了两份的空间。
3.2 align-self
作用：改变单个元素在侧轴上的排列。
初始效果：
添加：
.flex-container > div:last-child {
align-self: flex-end;
}
效果：
3.3 order
子元素的order值都默认是0，设置的order值越小，就排列在flex容器的越前面的位置。
初始：
修改：
.flex-container > div:nth-child(3) {
order: -1;
}
效果：
