CSS 学习笔记 - 弹性布局

绝地灬酷狼 2022-12-03 13:20 252阅读 0赞

### CSS 学习笔记 - 弹性布局 ###

*  弹性布局
 *  弹性容器
 *   *  flex-direction 主轴方向
     *  flex-wrap 元素换行规则
     *  justify-content 主轴上的对齐方式
     *  align-items交叉轴排列方式
     *  align-content多行时交叉轴排列方式
 *  弹性元素
 *   *  flex-basis 设置元素在主轴上的初始大小
     *  align-self 交叉轴上的排列方式
     *  元素缩放
     *   *  flex-grow 扩展规则
         *  flex-shrink 收缩规则
     *  order 控制元素排序
 *  参考资料

# 弹性布局 #

[Flexible\_Box\_Layout][Flexible_Box_Layout] 弹性布局布局。弹性盒子声明：

*  块级弹性盒子：`display: flex;`
 *  行级弹性盒子：`display: inline-flex;`

**演示效果：**[https://codepen.io/jerryjin/pen/ZEWqrOw][https_codepen.io_jerryjin_pen_ZEWqrOw]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70_pic_center 1]

*  **主轴**：容器内元素方式的方向。
 *  **交叉轴**：垂直于主轴的方向。
 *  **绝对定位**：设置为`绝对定位`的元素不参与弹性布局。
 *  **文本**：文本节点受弹性布局控制。
 *  **撑满剩余空间**：设置了`margin-< left | right >: auto;`的元素可以平分剩余的间隙空间。

# 弹性容器 #

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>添加给</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a rel="nofollow">flex-direction</a></td> 
   <td>容器</td> 
   <td align="left">定义主轴的方向（row,column）正反方向（*-reverse）。内部元素如何分布</td> 
  </tr> 
  <tr> 
   <td><a rel="nofollow">flex-wrap</a></td> 
   <td>容器</td> 
   <td align="left">指定 flex 元素是<code>单行</code>显示还是<code>多行</code>显示 。</td> 
  </tr> 
  <tr> 
   <td>flex-flow</td> 
   <td>容器</td> 
   <td align="left"><code>flex-direction</code> + <code>flex-wrap</code><br>例：<code>flex-flow: row wrap</code> 主：左&gt;右，交：上&gt;下<br>例：<code>row-reverse wrap-reverse</code> 主：右&gt;左，交：下&gt;上</td> 
  </tr> 
  <tr> 
   <td><a rel="nofollow">justify-content</a></td> 
   <td>容器</td> 
   <td align="left">分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间</td> 
  </tr> 
  <tr> 
   <td><a rel="nofollow">align-items</a></td> 
   <td>容器</td> 
   <td align="left">控制元素在交叉轴上的排列方式</td> 
  </tr> 
  <tr> 
   <td><a rel="nofollow">align-content</a></td> 
   <td>容器</td> 
   <td align="left">弹性容器设置为多行 and 当交叉轴上有多余的空间时，它控制元素如何对齐</td> 
  </tr> 
 </tbody> 
</table>

## flex-direction 主轴方向 ##

[flex-direction][] 应用于容器。定义主轴的方向（row,column）正反方向（\*-reverse）。内部元素如何分布。

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a title="默认值" rel="nofollow">row</a></td> 
   <td align="left">弹性容器的主轴被定义为与文本方向相同。 主轴起点和主轴终点与内容方向相同。</td> 
  </tr> 
  <tr> 
   <td>row-reverse</td> 
   <td align="left">效果同<code>row</code>，只是反转了主轴起点和终点。（从右到左）</td> 
  </tr> 
  <tr> 
   <td>column</td> 
   <td align="left">方向与<code>row</code>垂直。</td> 
  </tr> 
  <tr> 
   <td>column-reverse</td> 
   <td align="left">效果同<code>column</code>，只是反转了主轴起点和终点（从下到上）</td> 
  </tr> 
 </tbody> 
</table>

## flex-wrap 元素换行规则 ##

[flex-wrap][] 如果设置为多行，这个属性还允许你控制行的堆叠方向。  
如果设置为`单行`，则元素会在一行内被压缩。

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a title="默认值" rel="nofollow">nowrap</a></td> 
   <td align="left">不换行</td> 
  </tr> 
  <tr> 
   <td>wrap</td> 
   <td align="left">放不下就换行（正常从上往下）</td> 
  </tr> 
  <tr> 
   <td>wrap-reverse</td> 
   <td align="left">效果同 wrap，开始和结束点反转。（从下往上换行）</td> 
  </tr> 
 </tbody> 
</table>

*  flex-flow：两个属性 `flex-direction`、`flex-wrap`两个属性合并简写。同时设置方向和换行。

flex-flow : row warp;

## justify-content 主轴上的对齐方式 ##

[justify-content][] 应用于容器。分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间。

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>示意<br>元素：■<br>空间：□</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a title="默认值" rel="nofollow">flex-start</a></td> 
   <td>^■■■□$</td> 
   <td align="left">从行首开始排列。每行第一个【弹性元素】与行首对齐，同时所有后续的【弹性元素】与前一个对齐。</td> 
  </tr> 
  <tr> 
   <td>flex-end</td> 
   <td>^□■■■$</td> 
   <td align="left">从行尾开始排列。每行最后一个【弹性元素】与行尾对齐，其他元素将与后一个对齐。</td> 
  </tr> 
  <tr> 
   <td>center</td> 
   <td>^□■■■□$</td> 
   <td align="left">元素从弹性容器中心开始。（每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同）</td> 
  </tr> 
  <tr> 
   <td>space-between</td> 
   <td>^■□■□■$</td> 
   <td align="left">第一个靠头，最后一个靠尾，其它平分空间。</td> 
  </tr> 
  <tr> 
   <td>space-around</td> 
   <td>^□■□□■□□■□$</td> 
   <td align="left">剩余空间平分给每个元素，每个元素的空间平分给左右。</td> 
  </tr> 
  <tr> 
   <td>space-evenly</td> 
   <td>^□■□■□■□$</td> 
   <td align="left">边界到元素，元素到元素，的空间都相等。</td> 
  </tr> 
 </tbody> 
</table>

## align-items交叉轴排列方式 ##

[align-items][] 用于控制容器元素在`交叉轴`上的排列方式。

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a title="默认值" rel="nofollow">stretch</a></td> 
   <td align="left">元素被拉伸以适应容器。</td> 
  </tr> 
  <tr> 
   <td>center</td> 
   <td align="left">元素位于容器的中心</td> 
  </tr> 
  <tr> 
   <td>flex-start</td> 
   <td align="left">元素位于容器的交叉轴开头</td> 
  </tr> 
  <tr> 
   <td>flex-end</td> 
   <td align="left">元素位于容器的交叉轴结尾</td> 
  </tr> 
 </tbody> 
</table>

## align-content多行时交叉轴排列方式 ##

[align-content][] 弹性容器设置为多行，当交叉轴上有多余的空间时，它控制元素如何对齐。

<table> 
 <thead> 
  <tr> 
   <th>选项</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>stretch</td> 
   <td>将空间平均分配给元素</td> 
  </tr> 
  <tr> 
   <td>flex-start</td> 
   <td>元素紧靠主轴起点</td> 
  </tr> 
  <tr> 
   <td>flex-end</td> 
   <td>元素紧靠主轴终点</td> 
  </tr> 
  <tr> 
   <td>center</td> 
   <td>元素从弹性容器中心开始</td> 
  </tr> 
  <tr> 
   <td>space-between</td> 
   <td>两头靠紧，中间平分。第一个元素靠起点，最后一个元素靠终点，余下元素平均分配空间</td> 
  </tr> 
  <tr> 
   <td>space-around</td> 
   <td>每个元素两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍</td> 
  </tr> 
  <tr> 
   <td>space-evenly</td> 
   <td>元素间距离平均分配</td> 
  </tr> 
 </tbody> 
</table>

**演示效果：**[https://codepen.io/jerryjin/pen/XWdxQRq][https_codepen.io_jerryjin_pen_XWdxQRq] 主轴排列方式 + 伪类选择器演示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70]

# 弹性元素 #

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>添加给</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a rel="nofollow">flex-basis</a></td> 
   <td>元素</td> 
   <td align="left">设置元素在主轴上的初始大小</td> 
  </tr> 
  <tr> 
   <td><a rel="nofollow">align-self</a></td> 
   <td>元素</td> 
   <td align="left">定义交叉轴方向、正反、分布</td> 
  </tr> 
  <tr> 
   <td><a rel="nofollow">flex-grow</a></td> 
   <td>元素</td> 
   <td align="left">扩展规则</td> 
  </tr> 
  <tr> 
   <td><a rel="nofollow">flex-shrink</a></td> 
   <td>元素</td> 
   <td align="left">收缩规则</td> 
  </tr> 
  <tr> 
   <td>flex</td> 
   <td>元素</td> 
   <td align="left">缩写：<code>none | [ &lt;'flex-grow'&gt; &lt;'flex-shrink'&gt;? || &lt;'flex-basis'&gt; ]</code></td> 
  </tr> 
  <tr> 
   <td><a rel="nofollow">order</a></td> 
   <td>元素</td> 
   <td align="left">控制元素的位置，数值从小到大，取值期间 <code>0</code>和<code>整数</code></td> 
  </tr> 
 </tbody> 
</table>

## flex-basis 设置元素在主轴上的初始大小 ##

优先级大于 `width`、`height`。如果不使用 [box-sizing][] 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（[content-box][box-sizing]）的尺寸。

## align-self 交叉轴上的排列方式 ##

[align-self][] 应用于元素上，控制元素自己身在交叉轴上的排列方式。与align-items 的区别在于 align-items 应用于容器上，控制的是容器中所有元素。  
参数与 align-items 相同。

## 元素缩放 ##

### flex-grow 扩展规则 ###

[flex-grow][] 控制元素拉伸，当有剩余空间时，如何分配？权重值，按份数分即可。

1.  优先级高于 height、width。
2.  常见的为 1 大家平分。
3.  未设置的元素不参与扩展。

### flex-shrink 收缩规则 ###

[flex-shrink][] 控制在空间不够时咱们怎么缩？  
`缩放因子` = `需要收缩的总宽度` / (`所有元素` \* `自身flex-shrink`)`之和` \* `自身flex-shrink`  
`缩放宽度` = `自身宽度` \* `缩放因子`

**演示效果：**[https://codepen.io/jerryjin/pen/BaKGBaR][https_codepen.io_jerryjin_pen_BaKGBaR]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70_pic_center 2]

## order 控制元素排序 ##

[order][] 控制元素的位置，数值从小到大，取值期间 `0`和`整数`。

*  值相同时按照元素在源代码中出现的顺序排。
 *  只影响显示顺序，不影响逻辑顺序（可以`tab`键试试效果）

**演示效果：**[https://codepen.io/jerryjin/pen/oNxadZV][https_codepen.io_jerryjin_pen_oNxadZV] 显示顺序`CBDA`但逻辑上还是`ABCD`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70_pic_center 3]

# 参考资料 #

[MDN：CSS 弹性盒子布局][Flexible_Box_Layout]  
[MDN：CSS属性值定义语法][MDN_CSS]

[Flexible_Box_Layout]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout
[https_codepen.io_jerryjin_pen_ZEWqrOw]: https://codepen.io/jerryjin/pen/ZEWqrOw
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/e46ea977dc8340108c09079526042b50.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/b599be55b71f45109e12855e6c248469.png
[flex-direction]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-direction
[flex-wrap]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-wrap
[justify-content]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/justify-content
[align-items]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/align-items
[align-content]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/align-content
[https_codepen.io_jerryjin_pen_XWdxQRq]: https://codepen.io/jerryjin/pen/XWdxQRq
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70]: /images/20221123/fbd270fbfed54f6ea7634a50b0dfd6a4.png
[box-sizing]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing
[align-self]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/align-self
[flex-grow]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-grow
[flex-shrink]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-shrink
[https_codepen.io_jerryjin_pen_BaKGBaR]: https://codepen.io/jerryjin/pen/BaKGBaR
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/bf3b8c52205f4c759b2aa71aa1f429ac.png
[order]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/order
[https_codepen.io_jerryjin_pen_oNxadZV]: https://codepen.io/jerryjin/pen/oNxadZV
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/61a87986c86f4cc59a6a1e41f35684d6.png
[MDN_CSS]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/Value_definition_syntax