CSS - Flex布局

朴灿烈づ我的快乐病毒、 2021-07-25 12:30 524阅读 0赞

### Flex布局 ###

*  一. 什么是Flex布局？
 *  二. 基本概念
 *  三. Flex容器属性
 *   *  1. flex-direction
     *  2. flex-wrap
     *  3. flex-flow
     *  4. justify-content
     *  5. align-items
     *  6. align-content
 *  四. 项目的属性
 *   *  1. order
     *  2. flex-grow
     *  3. flex-shrink
     *  4. flex-basis
     *  5. flex
     *  6. align-self

# 一. 什么是Flex布局？ #

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

*  任何一个容器都可以指定为 Flex 布局。
    
        .box{ display:flex;}
 *  行内元素也可以使用Flex布局。
    
        .box{ 
          display: inline-flex;
        }
 *  Webkit 内核的浏览器，必须加上 `-webkit` 前缀。
    
        .box{ 
          display: -webkit-flex; /* Safari */
          display: flex;
        }
 *  设为 Flex 布局以后，子元素的 `float`、`clear` 和 `vertical-align` 属性将失效。

# 二. 基本概念 #

*  采用Flex布局的元素，称为Flex容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，成为flex项目（flex item），简称“项目”。
 *  容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框 的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
 *  项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center]

# 三. Flex容器属性 #

设置在容器上的六个属性：

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">flex-direction</td> 
   <td align="left">决定主轴的方向（即项目的排列方向）</td> 
  </tr> 
  <tr> 
   <td align="left">flex-wrap</td> 
   <td align="left">flex-wrap属性定义换行的方式。默认情况下，项目都排在一条线（又称“轴线”）上。</td> 
  </tr> 
  <tr> 
   <td align="left">flex-flow</td> 
   <td align="left">flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。</td> 
  </tr> 
  <tr> 
   <td align="left">justify-content</td> 
   <td align="left">定义了项目在主轴上的对齐方式</td> 
  </tr> 
  <tr> 
   <td align="left">align-items</td> 
   <td align="left">定义项目在交叉轴上如何对齐</td> 
  </tr> 
  <tr> 
   <td align="left">align-content</td> 
   <td align="left">定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。</td> 
  </tr> 
 </tbody> 
</table>

## 1. flex-direction ##

`flex-direction` 属性决定主轴的方向（即项目的排列方向）。

.box{ 
        display: flex;
        flex-direction: row | row-reverse | column | column-reverse;
    }

`flex-direction` 的属性值有四个：

<table> 
 <thead> 
  <tr> 
   <th align="left">属性值</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">row（默认值）</td> 
   <td align="left">主轴为水平方向，起点在左端</td> 
  </tr> 
  <tr> 
   <td align="left">row-reverse</td> 
   <td align="left">主轴为水平方向，起点在右端。</td> 
  </tr> 
  <tr> 
   <td align="left">column</td> 
   <td align="left">主轴为垂直方向，起点在上沿。</td> 
  </tr> 
  <tr> 
   <td align="left">column-reverse</td> 
   <td align="left">主轴为垂直方向，起点在下沿。</td> 
  </tr> 
 </tbody> 
</table>

**1.1 row**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 1]

**1.2 row-reverse**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 2]

**1.3 column**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 3]  
**1.4 column-reverse**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 4]

## 2. flex-wrap ##

默认情况下，项目都排在一条线（又称"轴线"）上。`flex-wrap` 属性定义，如果一条轴线排不下，如何换行。

.box{ 
        display: flex;
        flex-wrap: nowrap | wrap | wrap-reverse;
    }

`flex-wrap` 的属性值有三个：

<table> 
 <thead> 
  <tr> 
   <th align="left">属性值</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">nowrap（默认）</td> 
   <td align="left">不换行。</td> 
  </tr> 
  <tr> 
   <td align="left">wrap</td> 
   <td align="left">换行，第一行在上方。</td> 
  </tr> 
  <tr> 
   <td align="left">wrap-reverse</td> 
   <td align="left">换行，第一行在下方。</td> 
  </tr> 
 </tbody> 
</table>

**2.1 nowrap**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 5]  
**2.2 wrap**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 6]

**2.3 wrap-reverse**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 7]

## 3. flex-flow ##

`flex-flow` 属性是 `flex-direction` 属性和 `flex-wrap` 属性的简写形式，默认值为 `row nowrap`。

.box{ 
        display: flex;
        flex-flow:row nowrap;
    }

## 4. justify-content ##

`justify-content` 属性定义了项目在主轴上的对齐方式。

.box{ 
        display: flex;
        justify-content: flex-start | flex-end | center | space-between | space-around;
    }

`justify-content` 的属性值有五个：

<table> 
 <thead> 
  <tr> 
   <th align="left">属性值</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">flex-start（默认值）</td> 
   <td align="left">左对齐</td> 
  </tr> 
  <tr> 
   <td align="left">flex-end</td> 
   <td align="left">右对齐</td> 
  </tr> 
  <tr> 
   <td align="left">center</td> 
   <td align="left">居中</td> 
  </tr> 
  <tr> 
   <td align="left">space-between</td> 
   <td align="left">两端对齐，项目之间的间隔都相等。</td> 
  </tr> 
  <tr> 
   <td align="left">space-around</td> 
   <td align="left">每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。</td> 
  </tr> 
 </tbody> 
</table>

**4.1 flex-start**![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 8]  
**4.2 flex-end**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 9]  
**4.3 center**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 10]  
**4.4 space-between**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 11]  
**4.5 space-around**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 12]

## 5. align-items ##

`align-items` 属性定义项目在交叉轴上如何对齐。

.box{ 
        display: flex;
        align-items: flex-start | flex-end | center | baseline | stretch;
    }

`align-items` 的属性值有五个：

<table> 
 <thead> 
  <tr> 
   <th align="left">属性值</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">flex-start</td> 
   <td align="left">交叉轴的起点对齐。</td> 
  </tr> 
  <tr> 
   <td align="left">flex-end</td> 
   <td align="left">交叉轴的终点对齐。</td> 
  </tr> 
  <tr> 
   <td align="left">center</td> 
   <td align="left">交叉轴的中点对齐。</td> 
  </tr> 
  <tr> 
   <td align="left">baseline</td> 
   <td align="left">项目的第一行文字的基线对齐。</td> 
  </tr> 
  <tr> 
   <td align="left">stretch（默认值）</td> 
   <td align="left">如果项目未设置高度或设为auto，将占满整个容器的高度。</td> 
  </tr> 
 </tbody> 
</table>

**5.1 flex-start**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 13]  
**5.2 flex-end**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 14]  
**5.3 center**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 15]  
**5.4 baseline**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 16]

**5.5 stretch**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 17]

## 6. align-content ##

`align-content` 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.box{ 
        display: flex;
        align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    }

`align-content` 的属性值有六个：

<table> 
 <thead> 
  <tr> 
   <th align="left">属性值</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">flex-start</td> 
   <td align="left">与交叉轴的起点对齐。</td> 
  </tr> 
  <tr> 
   <td align="left">flex-end</td> 
   <td align="left">与交叉轴的终点对齐。</td> 
  </tr> 
  <tr> 
   <td align="left">center</td> 
   <td align="left">与交叉轴的中点对齐。</td> 
  </tr> 
  <tr> 
   <td align="left">space-between</td> 
   <td align="left">与交叉轴两端对齐，轴线之间的间隔平均分布。</td> 
  </tr> 
  <tr> 
   <td align="left">space-around</td> 
   <td align="left">每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。</td> 
  </tr> 
  <tr> 
   <td align="left">stretch（默认值）</td> 
   <td align="left">轴线占满整个交叉轴。</td> 
  </tr> 
 </tbody> 
</table>

# 四. 项目的属性 #

设置在容器中的项目上的六个属性：

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">order</td> 
   <td align="left">定义项目的排列顺序。数值越小，排列越靠前，默认为0。</td> 
  </tr> 
  <tr> 
   <td align="left">flex-grow</td> 
   <td align="left">定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。</td> 
  </tr> 
  <tr> 
   <td align="left">flex-shrink</td> 
   <td align="left">定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。</td> 
  </tr> 
  <tr> 
   <td align="left">flex-basis</td> 
   <td align="left">定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。</td> 
  </tr> 
  <tr> 
   <td align="left">flex</td> 
   <td align="left">flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。</td> 
  </tr> 
  <tr> 
   <td align="left">align-self</td> 
   <td align="left">align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。</td> 
  </tr> 
 </tbody> 
</table>

## 1. order ##

`order` 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。  
`css .item { order: 0; }`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 18]

## 2. flex-grow ##

定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。  
`css .item { flex-grow: 0; }`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 19]

## 3. flex-shrink ##

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

## 4. flex-basis ##

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为`auto`，即项目的本来大小。  
可以设为和 `width` 或 `height` 属性一样的值（比如`350px`），则项目将占据固定空间。  
`css .item { flex-basis: <length> | auto; }`

## 5. flex ##

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。  
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。  
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

## 6. align-self ##

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/ac29f8ae7a7f4276b181481ee204c056.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210725/37451aaa623241a3926dd0e3137544fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210725/5b4308c79ea84ac3b3b232a7d5a2002e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20210725/a359c6e3490b4d65bfcb956122a5cb67.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20210725/86e620e357284aee9e3fec4bba7a9f57.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20210725/584edcceb705458fa3576f4afc41ace2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20210725/0619ea3227444b55aeb7284f3b858663.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20210725/4887508377b5415d9daa9c55ef8bc80e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20210725/c12b04841a204907946e361a0f207cf7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20210725/fb1d5081f28a4fcd9d707ba2f74130e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20210725/3ce59e2a3e254795bcb0866312075ae2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 11]: /images/20210725/03773c80c6514f74b604618fd3a6ed3a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 12]: /images/20210725/098a54de103348309fa19e6b26485986.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 13]: /images/20210725/3a3df15ebc1f425597e57852a9e42c57.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 14]: /images/20210725/11406b918b76452aa18f07718c874b59.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 15]: /images/20210725/af67099856cc4909be289f8cee0e5bf2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 16]: /images/20210725/e3d8ecff4b474f82854f1d4c2599fa60.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 17]: /images/20210725/080b418f61924df1857bc469b3e56a82.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 18]: /images/20210725/ed5a605d761f4adf9477c5dedeeaf87b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 19]: /images/20210725/f468d32e5cb84a349dd93eaba39494cd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 20]: /images/20210725/bc0d65654fb84f7fac2e174db22039aa.png