流式布局

本篇我们将从流式布局的四大方面入手，旨在认识、了解、以至于掌握其特性及功能。

为什么要用？

在我们抛弃标准流、定位流以及浮动流之后，取而代之的是flex流式布局。以一种更加优雅的方式实现元素布局。

轴的定义

在开始说它的特性之前，我们首先需要了解的是flex布局依靠的两个重要概念：主轴（一般为x轴）和交叉轴（一般为y轴）

那么我们如何改变或者说定义主轴和交叉轴呢？——flex-direction

flex-direction

graph TD
flex-direction --> row
flex-direction --> row-reverse
flex-direction --> column
flex-direction --> column-reverse 

下面以主轴为例，交叉轴即除了主轴之外的那一条，这里不再赘述。

row | row-reverse

设置了这个属性，主轴将沿着inline方向延展

1. row： 从左向右延展

2. row-reverse： 从右向左延展

column | column-reverse

主轴会沿着block方向延展

1. column： 从上向下延展

2. column-reverse： 从下往上延展

flex模块划分

graph TD
flex布局-->容器
flex布局-->轴
轴-->主轴
轴-->交叉轴
容器--> 父盒子
容器--> 子盒子
父盒子 --> justify-content
父盒子--> align-items
子盒子-->flex
子盒子-->align-self 

父盒子

justify-content(设置主轴排列）

设置主轴的排序一般包括两个方面：

1.位置排列1.flex-start 容器开头对齐2.flex-end 容器尾部对齐3.center 容器居中
2.分布排列1.space-between2.space-around

位置排列

也就是父容器在一整个占位盒子里面的位置，是在盒子开头（flex-start）、盒子中间（center）还是盒子最后flex-end。

分布排列

可以控制他的子容器们的排列状态，一般分为两部分：

space-around: 即将除盒子之外的剩余空间均分后分配在盒子中间，如上图所示 space-between： 即在上一种方式的基础上，盒子的开头和结尾也会被分配空间，不过分配的空间是子容器间的一半。

align-item(设置子容器的对齐方式)

align-items主要用于控制交叉轴元素内各个子元素的排列方式，一般将集中排列分类为位置排列、基线排列、拉伸排列

位置排列

子容器们的对齐方式，一般分为：

flex-start（交叉轴起始端对齐）

flex-end（交叉轴末端对齐）

center（交叉轴居中对齐）

基线排列

baseline

指内容的对齐方式是向基线（baseline）对齐，简单来说就是所有文字都处在同一水平，而baseline的高度与 根据MDN文档：侧轴起点到元素基线距离最大的元素将会于侧轴起点对齐以确定基线

拉伸排列

align-items：stretch，让盒子沿着交叉轴拉伸到和父容器一致。

子盒子

主要设置各个子容器的状态，一般分为主轴和交叉轴对子容器进行操作：

主轴：flex

flex

即设置子盒子是不是弹性的，他的伸缩比例由属性确定

交叉轴：align-self

align-self

设置子容器的排列方式

graph TD
align-self --> 按照位置排列
按照位置排列 --> flex-start
按照位置排列 --> flexend
按照位置排列 --> center
align-self --> 基线排列
基线排列 --> baseline
align-self --> 拉伸排列
拉伸排列 --> stretch 

通过以上方式可以为单个子容器设置样式。这里举个例子：我们想要单独设置第一个子容器在交叉轴的位置处于开头，可以给单一容器加上align-self：flex-start，旨在给它本身自己添加这个属性。

容易被忽略的点

三个我们比较容易忽略的属性：

1.flex-grow --> 简写为flex: 0
2.flex-shrink --> 简写为flex：1
3.flex-basis --> 简写为flex:auto
4.flex-wrap --> 换行

flex-grow

一般用于规定项在容器中分配剩余空间的相对比例，一般用于设置子容器的占比。

flex-shrink

用于子容器的收缩规则，可以设置收缩占比，比如延展2倍(flex-shrink:2)或者缩小0.6倍(flex-shrink:0.6)

flex-basis

一般用于设置元素在主轴方向上的初始大小，默认是auto，如果需要改变盒子的大小我们可以使用flex-basis对子容器的大小进行改变，如：flex-basis：200px

而我们想要通过文本大小设置容器大小的话可以通过：

1.auto
2.max-content
3.min-content
4.flex-basis test

flex-wrap

这里主要是分清wrap、nowrap和wrap-reverse的区别，相信通过下图即清晰可见

总结

css样式繁多，但是只需要按照本文的分类，即可分门别类的对流式布局进行记忆；本人一般分为父容器、子容器、常用属性和不常用属性 以及 其常见形式进行记忆.

最后

整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。

有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享

部分文档展示：

文章篇幅有限，后面的内容就不一一展示了

有需要的小伙伴，可以点下方卡片免费领取