【CSS】Flex布局详解（图解）

我不是女神ヾ 2023-02-13 11:59 18阅读 0赞

### 目录 ###

*   *   *  1. 什么是Flex布局？
         *  2. 父元素属性
         *   *  2.1 flex-direction
             *  2.2 flex-wrap
             *  2.3 flex-flow
             *  2.4 justify-content
             *  2.5 align-items
             *  2.6 align-content
         *  3. 子元素属性
         *   *  3.1 order
             *  3.2 flex-grow
             *  3.3 flex-shrink
             *  3.4 flex-basis
             *  3.5 flex
             *  3.6 align-self

**前言：**

在做一个小项目，页面使用到了Flex布局，不是很熟悉，所以整理一下相关知识。

### 1. 什么是Flex布局？ ###

**概念：** Flex 是 Flexible Box 的缩写，即弹性布局（也叫Flex布局，弹性盒子布局）。

**主要思想：** 弹性布局的主要思想是使父元素能够调整子元素的宽度、高度、排列方式，从而更好的适应可用的布局空间。

**特点：** Flex布局更适合小规模的布局，可以简便、完整、响应式的实现各种页面布局。但是，设为Flex布局以后，其子元素的`float`、`clear`和`vertical-align`属性将失效。

**布局概念：** 采用 Flex 布局的元素，称为 Flex 容器，简称"**容器**"。它的所有子元素自动成为容器成员，称为 Flex 项目，简称"**项目**"。

容器默认存在两个轴：**水平交叉轴**（main axis）和**垂直交叉轴**（cross axis），项目默认沿主轴排列。  
![在这里插入图片描述][20200529115217231.png]

### 2. 父元素属性 ###

父元素有以下六个属性：

*  flex-direction
 *  flex-wrap
 *  flex-flow
 *  justify-content
 *  align-items
 *  align-content

#### 2.1 flex-direction ####

**flex-direction**：容器内元素排列方向

*  `flex-direction:row`：默认值，沿水平主轴从左到右排列  
    ![在这里插入图片描述][20200529122251531.png]
 *  `flex-direction:row-reverse`：沿水平主轴从右到左排列  
    ![在这里插入图片描述][20200529122553927.png]
 *  `flex-direction:column`：沿垂直主轴从上到下排列  
    ![在这里插入图片描述][20200529122909175.png]
 *  `flex-direction:column-reverse`：沿垂直主轴从下到上排列  
    ![在这里插入图片描述][20200529122938129.png]

#### 2.2 flex-wrap ####

**flex-wrap**：容器内元素是否换行

*  `flex-wrap: nowrap`：默认值，不换行  
    ![在这里插入图片描述][20200529123450525.png]
 *  `flex-wrap: wrap`：换行，第一行在上面  
    ![在这里插入图片描述][20200529123529722.png]
 *  `flex-wrap: wrap-reverse`：换行，第一行在下面  
    ![在这里插入图片描述][20200529123616207.png]

#### 2.3 flex-flow ####

`flex-direction`属性和`flex-wrap`属性的简写，默认为:`flex-flow:row nowrap`

#### 2.4 justify-content ####

**justify-content**：元素在主轴的对齐方式

*  `justify-content : center` ：元素在主轴上**居中**  
    ![在这里插入图片描述][20200529125205359.png]
 *  `justify-content : flex-start`：元素在主轴上**左对齐**或**上对齐**  
    ![在这里插入图片描述][20200529125226111.png]
 *  `justify-content : flex-end`：元素在主轴上**右对齐**或**下对齐**  
    ![在这里插入图片描述][20200529125047555.png]
 *  `justify-content : space-between`：元素在主轴上**两端对齐**，元素之间间隔相等  
    ![在这里插入图片描述][20200529125656588.png]
 *  `justify-content : space-around` ：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。  
    ![在这里插入图片描述][20200529125838265.png]

#### 2.5 align-items ####

**align-item**：元素在交叉轴上对齐方式

*  `align-item：flex-start`：交叉轴的起点对齐（上面或左边）  
    ![在这里插入图片描述][20200529130749923.png]
 *  `align-item：flex-end`：交叉轴的终点对齐（下面或有右边）  
    ![在这里插入图片描述][20200529130954279.png]
 *  `align-item：center`：交叉轴的中点对齐  
    ![在这里插入图片描述][20200529131220678.png]
 *  `align-item：stretch`：默认值、如果元素未设置高度或设为auto，将占满整个容器的高度  
    ![在这里插入图片描述][20200529131504207.png]
 *  `align-item：baseline`：以元素的第一行文字的基线对齐  
    ![在这里插入图片描述][20200529131938300.png]

#### 2.6 align-content ####

**align-content**：多根轴线对齐方式。如果元素只有一根轴线，该属性不起作用。

*  `align-content:stretch`：默认值，轴线占满整个交叉轴  
    ![在这里插入图片描述][20200529234551420.png]
 *  `align-content: flex-start`：从交叉轴开始位置填充  
    ![在这里插入图片描述][20200529233507798.png]
 *  `align-content: flex-end`：从交叉轴结尾位置填充  
    ![在这里插入图片描述][2020052923362491.png]
 *  `align-content: center`：与交叉轴中点对齐  
    ![在这里插入图片描述][20200529233829513.png]
 *  `align-content: space-between`：与交叉轴两端对齐，轴线之前的间隔平均分布  
    ![在这里插入图片描述][20200529234105574.png]
 *  `align-content: space-around`：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍  
    ![在这里插入图片描述][20200529234237683.png]

### 3. 子元素属性 ###

子元素有以下六个属性：

*  order
 *  flex-grow
 *  flex-shrink
 *  flex-basis
 *  flex
 *  align-self

#### 3.1 order ####

`order`属性定义项目的排列顺序。数值越小，排列越靠前，默认为`0`  
![在这里插入图片描述][20200529235523374.png]

#### 3.2 flex-grow ####

`flex-grow`属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。  
![在这里插入图片描述][20200529235741257.png]  
![在这里插入图片描述][20200529235909551.png]

#### 3.3 flex-shrink ####

`flex-shrink`属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。  
![在这里插入图片描述][20200530000128493.png]

#### 3.4 flex-basis ####

`flex-basis`属性定义了在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

#### 3.5 flex ####

`flex`属性是`flex-grow`, `flex-shrink` 和 `flex-basis`的简写，后两个属性可选。默认值为：`flex:0 1 auto。`

#### 3.6 align-self ####

`align-self`属性允许单个项目有与其他项目不一样的对齐方式，可覆盖`align-items`属性。默认值为`auto`，表示继承父元素的`align-items`属性，如果没有父元素，则等同于`stretch`。

[20200529115217231.png]: https://img-blog.csdnimg.cn/20200529115217231.png?
[20200529122251531.png]: https://img-blog.csdnimg.cn/20200529122251531.png
[20200529122553927.png]: https://img-blog.csdnimg.cn/20200529122553927.png
[20200529122909175.png]: https://img-blog.csdnimg.cn/20200529122909175.png
[20200529122938129.png]: https://img-blog.csdnimg.cn/20200529122938129.png
[20200529123450525.png]: https://img-blog.csdnimg.cn/20200529123450525.png?
[20200529123529722.png]: https://img-blog.csdnimg.cn/20200529123529722.png?
[20200529123616207.png]: https://img-blog.csdnimg.cn/20200529123616207.png?
[20200529125205359.png]: https://img-blog.csdnimg.cn/20200529125205359.png?
[20200529125226111.png]: https://img-blog.csdnimg.cn/20200529125226111.png?
[20200529125047555.png]: https://img-blog.csdnimg.cn/20200529125047555.png
[20200529125656588.png]: https://img-blog.csdnimg.cn/20200529125656588.png?
[20200529125838265.png]: https://img-blog.csdnimg.cn/20200529125838265.png?
[20200529130749923.png]: https://img-blog.csdnimg.cn/20200529130749923.png?
[20200529130954279.png]: https://img-blog.csdnimg.cn/20200529130954279.png?
[20200529131220678.png]: https://img-blog.csdnimg.cn/20200529131220678.png?
[20200529131504207.png]: https://img-blog.csdnimg.cn/20200529131504207.png?
[20200529131938300.png]: https://img-blog.csdnimg.cn/20200529131938300.png?
[20200529234551420.png]: https://img-blog.csdnimg.cn/20200529234551420.png?
[20200529233507798.png]: https://img-blog.csdnimg.cn/20200529233507798.png?
[2020052923362491.png]: https://img-blog.csdnimg.cn/2020052923362491.png?
[20200529233829513.png]: https://img-blog.csdnimg.cn/20200529233829513.png?
[20200529234105574.png]: https://img-blog.csdnimg.cn/20200529234105574.png?
[20200529234237683.png]: https://img-blog.csdnimg.cn/20200529234237683.png?
[20200529235523374.png]: https://img-blog.csdnimg.cn/20200529235523374.png
[20200529235741257.png]: https://img-blog.csdnimg.cn/20200529235741257.png?
[20200529235909551.png]: https://img-blog.csdnimg.cn/20200529235909551.png
[20200530000128493.png]: https://img-blog.csdnimg.cn/20200530000128493.png?