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;
}


效果：