前端布局系列---flex布局

男娘i 2022-11-26 11:57 262阅读 0赞

布局是指HTML的整体结构，好的布局直接影响到用户的体验，同样，在前端面试的过程中，布局也是一个必问点，所以，今天我们来整体回顾一下flex布局。

--------------------

# 什么是flex布局？ #

flex是flexibleBox的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性，主要用来为移动端布局，PC端支持较差。

# 布局原理 #

通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

# 开始flex布局的方式 #

/* 块级元素 */
    display:flex
    /* 行内元素 */
    display:inline-flex

任何一个元素都可以指定为flex布局。当我们为父盒子设为flex布局之后，子元素的`float、clear、vertical-align`属性将失效。

采用flex布局的元素，称为flex容器（flex container），所有的子元素自动成为容器成员，称为flex项目（flex item），默认存在两根轴，水平的主轴（main axis）和垂直的交叉轴（cross axis），项目默认沿主轴排列。如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70]

# flex容器的属性 #

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>flex-direction</td> 
   <td>设置主轴的方向</td> 
  </tr> 
  <tr> 
   <td>justify-content</td> 
   <td>设置主轴上的子元素排列方式</td> 
  </tr> 
  <tr> 
   <td>flex-wrap</td> 
   <td>设置子元素是否换行</td> 
  </tr> 
  <tr> 
   <td>align-items</td> 
   <td>设置侧轴上的子元素的排列方式</td> 
  </tr> 
  <tr> 
   <td>flex-flow</td> 
   <td>flex-direction和flex-wrap的复合属性</td> 
  </tr> 
  <tr> 
   <td>align-content</td> 
   <td>决定了多行子元素在侧轴的对齐方式</td> 
  </tr> 
 </tbody> 
</table>

## 1.flex-direction：设置主轴的方向 ##

①`flex-direction: row` 默认，x轴，从左到右  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 1]  
②`flex-direction: row-reverse;` x轴翻转，从右到左  
![在这里插入图片描述][2020081121184011.png]  
③`flex-direction: column;` y轴，从上到下  
![在这里插入图片描述][20200811211929974.png]  
④`flex-direction: column-reverse;` y轴翻转，从下到上  
![在这里插入图片描述][20200811212017423.png]

## 2.justify-content：设置主轴上的子元素排列方式 ##

①`justify-content: flex-start;`如果主轴是x轴，则从左到右  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 2]  
②`justify-content: flex-end;` 从尾部开始排列  
![在这里插入图片描述][20200812101646592.png]  
③`justify-content: center;` 主轴上居中对齐  
![在这里插入图片描述][20200812101746208.png]  
④`justify-content: space-around;` 到两端的距离等于中间距离的一半  
![在这里插入图片描述][20200812101846204.png]  
⑤`justify-content: space-between;` 两端对齐，中间距离相等  
![在这里插入图片描述][20200812102356292.png]

⑥`justify-content: space-evenly;` 所有的距离都相等  
![在这里插入图片描述][20200812102043234.png]

## 3.flex-wrap：设置子元素是否换行 ##

①`flex-wrap: nowrap;` 默认不换行，压缩显示  
![在这里插入图片描述][20200812102547177.png]  
②`flex-wrap: wrap;` 换行显示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 3]  
③`flex-wrap: wrap-reverse;` 多行显示，对比wrap，在侧轴上反过来  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 4]

## 4.align-items：设置侧轴上的子元素的排列方式 ##

①`align-items: flex-start;` 顶部对齐  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 5]  
②`align-items: flex-end;` 底部对齐  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 6]  
③`align-items: center;` 垂直居中  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 7]

## 5.align-content：决定了多行子元素在侧轴的对齐方式 ##

①`align-content: flex-start;` 从上到下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 8]  
②`align-content: flex-end;`最后一行挨着下边  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 9]  
③`align-content: center;` 居中对齐  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 10]  
④`align-content: space-around;` 到两端的距离等于中间距离的一半  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 11]  
⑤`align-content: space-between;` 两端对齐，中间距离相等  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 12]  
⑥`align-content: space-evenly;` 所有距离都相等  
![align-content: space-evenly;][align-content_ space-evenly]

## 6.flex-flow：flex-direction和flex-wrap的复合属性 ##

# flex项目的属性 #

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>order</td> 
   <td>定义项目的排列顺序，默认是0，越小越靠前</td> 
  </tr> 
  <tr> 
   <td>flex-grow</td> 
   <td>设置子元素如何扩展，默认为0，即使存在剩余空间，也不放大</td> 
  </tr> 
  <tr> 
   <td>flex-shrink</td> 
   <td>设置子元素如何收缩，默认为0，即空间不足时，会缩小</td> 
  </tr> 
  <tr> 
   <td>flex-basis</td> 
   <td>设置子元素在主轴上的字体大小</td> 
  </tr> 
  <tr> 
   <td>align-self</td> 
   <td>控制子元素自己在侧轴上的排列方式，覆盖父元素的align-items属性</td> 
  </tr> 
  <tr> 
   <td>flex</td> 
   <td>定义子元素分配剩余空间</td> 
  </tr> 
 </tbody> 
</table>

## 1.order：定义项目的排列顺序，默认是0，越小越靠前 ##

给child1元素添加属性`order: 1;`，展示效果如图：  
![在这里插入图片描述][2020081210475291.png]

## 2.flex-grow：设置子元素如何扩展，默认为0，即使存在剩余空间，也不放大 ##

给child1元素添加属性`flex-grow: 2;`，展示效果如图：  
![flex-grow: 2;][flex-grow_ 2]  
`flex-grow`可以设置任意非负数字（正小数、正整数、0），默认是0。当`flex container`在主轴方向上有剩余size时，`flex-grow`才会有效。如果所有`flex-item`的`flex-grow`总和超过1，每个`flex-item`扩展的size为：`剩余size * flex-grow / sum`。不超过1，每个扩展的size为：`剩余size * flex-grow`。

## 3.flex-shrink：设置子元素如何收缩，默认为0，即空间不足时，会缩小 ##

给child1元素添加属性`flex-shrink: 2;`，展示效果如图：  
![在这里插入图片描述][20200812105446771.png]  
`flex-shrink`可以设置任意非负数字（正小数、正整数、0），默认值是1。当`flex-items`的宽度超过了主轴的宽度时，`flex-shrink`才会有效。如果所有`flex-item`的`flex-shrink`总和超过1，每个`flex-items`收缩的size为：`超出的size * 收缩比例 / 收缩比例之和`。不超过1，每个`flex-item`的size为：`超出size * 收缩比例`。最终会溢出父盒子。

## 4.flex-basis：计算主轴是否有多余空间 ##

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

> max-width/max-height/min-width/min-height  
> flex-basis  
> width/height  
> 内容本身的size

## 5.align-self：控制子元素自己在侧轴上的排列方式，覆盖父元素的align-items属性 ##

父元素设置了`align-items: center;`，child1元素设置了`align-self: flex-end;`，展示效果如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 13]

## 6.flex：定义子元素分配剩余空间 ##

是`flex-grow、flex-shrink、flex-basis`的简写

# 小结 #

到此，flex布局的相关知识整理就先到这里了，flex布局让我们的布局方式更加灵活和简单，还可以达到页面布局自适应的效果。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70]: /images/20221124/192488a9aee04b2d9873a62b131a3afb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 1]: /images/20221124/ea269acbf51d464287c6d8667d5405d5.png
[2020081121184011.png]: /images/20221124/4cd02961650642998a79563d8f95cd83.png
[20200811211929974.png]: /images/20221124/bf80ae05691e4d44aeb39539dd5d19d6.png
[20200811212017423.png]: /images/20221124/d0853e90f94e4138a6f61a044d490479.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 2]: /images/20221124/2b92bbf3969641579170e804802b301f.png
[20200812101646592.png]: /images/20221124/11b879271eca4c8aa4b96834e274ff94.png
[20200812101746208.png]: /images/20221124/50cc5376320d4d10930067b9b50d3a68.png
[20200812101846204.png]: /images/20221124/9ae3c46b0c4d4ec3a716774025d33f8a.png
[20200812102356292.png]: /images/20221124/c76cb0bea5004a0ba40c7491f3a99823.png
[20200812102043234.png]: /images/20221124/9f8db228678045ff80ce21fe779ba3f1.png
[20200812102547177.png]: /images/20221124/19b54b2c723749c6ba30ab4f8f89b2a2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 3]: /images/20221124/88c898680e74463cbc2c924be4780259.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 4]: /images/20221124/4308a3a9c6ba4682a06d40735677d812.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 5]: /images/20221124/b0f00bf21919454eb23643db69840e0c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 6]: /images/20221124/e37b28cfa62a429a9fbb036d5d52f898.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 7]: /images/20221124/0ee1309b6e514f66b0a372829459bf24.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 8]: /images/20221124/2234523e512a42329781988809b61ca8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 9]: /images/20221124/0572f6dc4e134072891cd54ca66efbc0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 10]: /images/20221124/29c490beffdd42adb666ed510d119148.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 11]: /images/20221124/d96de76652224735abbd7ebbfa277947.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 12]: /images/20221124/7a6e160ca9f74587858a75c047c1e4e8.png
[align-content_ space-evenly]: /images/20221124/470855d4f81e480c8a9518f004ea322b.png
[2020081210475291.png]: /images/20221124/f6726aa5abf04d1a8ad38febf75bde12.png
[flex-grow_ 2]: /images/20221124/55842485c9f8405e8a5e4c76c5a84d49.png
[20200812105446771.png]: /images/20221124/9ce167f3fa854f478bf194e2cf8698d7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 13]: /images/20221124/0760f8c39f1d4a3bb3880c0fe3b09e43.png