CSS3中Flex弹性盒子布局

叁歲伎倆 2023-10-09 23:44 57阅读 0赞

#### 文章目录 ####

*  一、介绍
 *  二、教学视频
 *  三、基本概念
 *  四、容器属性
 *   *  1.flex-direction
     *  2.flex-wrap
     *  3.flex-flow
     *  4.justify-content
     *  5.align-items
     *  6.align-content
 *  五、项目属性
 *   *  1.order
     *  2.align-self
     *  3.flex

## 一、介绍 ##

Flex 是 Flexible Box 的缩写，意为“弹性布局”或者“弹性盒子”，是 CSS3 中的一种新的布局模式，可以简便、完整、响应式地实现各种页面布局，当页面需要适应不同的屏幕大小以及设备类型时非常适用。目前，几乎所有的浏览器都支持 Flex 布局。

## 二、教学视频 ##

教学讲解视频：[视频地址][Link 1]

## 三、基本概念 ##

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称“项目”。容器默认存在两根轴，分别为水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置叫做 main start，结束位置叫做 main end；交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size。如下图所示：  
![在这里插入图片描述][b681e267cf3d4360aa29e75b2b3ab7fc.png]  
CSS 中提供了以下属性来实现 Flex 布局：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>display</td> 
   <td>指定 HTML 元素的盒子类型</td> 
  </tr> 
  <tr> 
   <td>flex-direction</td> 
   <td>指定弹性盒子中子元素的排列方式</td> 
  </tr> 
  <tr> 
   <td>flex-wrap</td> 
   <td>设置当弹性盒子的子元素超出父容器时是否换行</td> 
  </tr> 
  <tr> 
   <td>flex-flow</td> 
   <td>flex-direction 和 flex-wrap 两个属性的简写</td> 
  </tr> 
  <tr> 
   <td>justify-content</td> 
   <td>设置弹性盒子中元素在主轴（横轴）方向上的对齐方式</td> 
  </tr> 
  <tr> 
   <td>align-items</td> 
   <td>设置弹性盒子中元素在侧轴（纵轴）方向上的对齐方式</td> 
  </tr> 
  <tr> 
   <td>align-content</td> 
   <td>修改 flex-wrap 属性的行为，类似 align-items，但不是设置子元素对齐，而是设置行对齐</td> 
  </tr> 
  <tr> 
   <td>order</td> 
   <td>设置弹性盒子中子元素的排列顺序</td> 
  </tr> 
  <tr> 
   <td>align-self</td> 
   <td>在弹性盒子的子元素上使用，用来覆盖容器的 align-items 属性</td> 
  </tr> 
  <tr> 
   <td>flex</td> 
   <td>设置弹性盒子中子元素如何分配空间</td> 
  </tr> 
  <tr> 
   <td>flex-grow</td> 
   <td>设置弹性盒子的扩展比率</td> 
  </tr> 
  <tr> 
   <td>flex-shrink</td> 
   <td>设置弹性盒子的收缩比率</td> 
  </tr> 
  <tr> 
   <td>flex-basis</td> 
   <td>设置弹性盒子伸缩基准值</td> 
  </tr> 
 </tbody> 
</table>

## 四、容器属性 ##

### 1.flex-direction ###

flex-direction 属性用来决定主轴的方向（即项目的排列方向），属性的可选值如下：

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>row</td> 
   <td>默认值，主轴沿水平方向从左到右</td> 
  </tr> 
  <tr> 
   <td>row-reverse</td> 
   <td>主轴沿水平方向从右到左</td> 
  </tr> 
  <tr> 
   <td>column</td> 
   <td>主轴沿垂直方向从上到下</td> 
  </tr> 
  <tr> 
   <td>column-reverse</td> 
   <td>主轴沿垂直方向从下到上</td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][ec41757b140b44fb82cc630086d3b796.png]

### 2.flex-wrap ###

flex-wrap 属性用来设置当弹性盒子的子元素（项目）超出父容器时是否换行，属性的可选值如下：

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>nowrap</td> 
   <td>默认值，表示项目不会换行</td> 
  </tr> 
  <tr> 
   <td>wrap</td> 
   <td>表示项目会在需要时换行</td> 
  </tr> 
  <tr> 
   <td>wrap-reverse</td> 
   <td>表示项目会在需要时换行，但会以相反的顺序</td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][d25faea3e0b34dd7ac75689ba07af20d.png]

### 3.flex-flow ###

flex-flow 属性是 `flex-direction` 和 `flex-wrap` 两个属性的简写，这里不详细说了，举个例子：

flex-flow: row-reverse wrap;

### 4.justify-content ###

justify-content 属性用于设置弹性盒子中子元素（项目）在主轴（横轴）方向上的对齐方式，属性的可选值如下：

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <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>

![在这里插入图片描述][ab860ab599404f84a0a1fa40d34e88e8.png]

### 5.align-items ###

align-items 属性用来设置弹性盒子中子元素（项目）在侧轴（纵轴）方向上的对齐方式，`适用于单行`，属性的可选值如下：

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>stretch</td> 
   <td>默认值，项目将被拉伸以适合容器(项目不指定高度的情况下)</td> 
  </tr> 
  <tr> 
   <td>center</td> 
   <td>项目位于容器的中央</td> 
  </tr> 
  <tr> 
   <td>flex-start</td> 
   <td>项目位于容器的顶部</td> 
  </tr> 
  <tr> 
   <td>flex-end</td> 
   <td>项目位于容器的底部</td> 
  </tr> 
  <tr> 
   <td>baseline</td> 
   <td>各项目中的文字基线对齐</td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][f7adb55741784d5ead2135684e7b1458.png]

### 6.align-content ###

align-content 属性与 justify-content 属性类似，可以在弹性盒子的侧轴还有多余空间时调整容器内项目的对齐方式，`适用于多行`，属性的可选值如下：

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>stretch</td> 
   <td>默认值，将项目拉伸以占据剩余空间</td> 
  </tr> 
  <tr> 
   <td>center</td> 
   <td>项目在容器内居中排布</td> 
  </tr> 
  <tr> 
   <td>flex-start</td> 
   <td>项目在容器的顶部排列</td> 
  </tr> 
  <tr> 
   <td>flex-end</td> 
   <td>项目在容器的底部排列</td> 
  </tr> 
  <tr> 
   <td>space-between</td> 
   <td>同justify-content，只不过改成交叉轴方向</td> 
  </tr> 
  <tr> 
   <td>space-around</td> 
   <td>同justify-content，只不过改成交叉轴方向</td> 
  </tr> 
  <tr> 
   <td>space-evenly</td> 
   <td>同justify-content，只不过改成交叉轴方向</td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][a58c0efea4f049ed98a7c3338186927a.png]

## 五、项目属性 ##

### 1.order ###

order 属性用来设置项目在容器中出现的顺序，您可以通过具体的数值来定义项目在容器中的位置，其中 number 就是项目在容器中的位置，默认值为 0。  
![在这里插入图片描述][ef05413c84844e649a1278672e8534a2.png]

### 2.align-self ###

align-self 属性允许您为某个项目设置不同于其它项目的对齐方式，该属性可以覆盖 align-items 属性的值。align-self 属性的可选值如下：

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>auto</td> 
   <td>默认值，表示元素将继承其父容器的 align-items 属性值，如果没有父容器，则为“stretch”</td> 
  </tr> 
  <tr> 
   <td>stretch</td> 
   <td>项目将被拉伸以适合容器</td> 
  </tr> 
  <tr> 
   <td>center</td> 
   <td>项目位于容器的中央</td> 
  </tr> 
  <tr> 
   <td>flex-start</td> 
   <td>项目位于容器的顶部</td> 
  </tr> 
  <tr> 
   <td>flex-end</td> 
   <td>项目位于容器的底部</td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][4b6d200a78c84386b981933a6925864b.png]

### 3.flex ###

flex 属性是 flex-grow、flex-shrink 和 flex-basis 三个属性的简写，语法格式如下：

flex: flex-grow flex-shrink flex-basis;

参数说明如下：  
flex-grow：（**必填参数**）一个数字，用来设置项目相对于其他项目的`增长量`，默认值为 0；  
flex-shrink：（选填参数）一个数字，用来设置项目相对于其他项目的`收缩量`，默认值为 1；  
flex-basis：（选填参数）项目的长度，合法值为 auto（默认值，表示自动）、inherit（表示从父元素继承该属性的值） 或者以具体的值加 “%”、“px”、“em” 等单位的形式。它和width属性类似，但也有点不同。`它的初始值是 auto，此时浏览器会检查项目是否设置了 width 属性值。如果有，则使用 width 的值作为 flex-basis 的值；如果没有，则用项目内容自身的大小。如果 flex-basis 的值不是 auto，width 属性会被忽略，同时flex-basis优先级比width高，会覆盖width`。

另外，flex 属性还有两个快捷值，分别为 auto（1 1 auto）和 none（0 0 auto）。

![在这里插入图片描述][d31a50a26d764626a0657cc727c7c65a.png]

![在这里插入图片描述][e36efbfa2f524f15aed3ac4d5ed65f5b.png]  
flex-basis会根据内容自动撑开，而width属性不会。  
![在这里插入图片描述][284f830c455b46c79e1f1b6c2e756a45.png]

[Link 1]: https://www.bilibili.com/video/BV13T411t73X
[b681e267cf3d4360aa29e75b2b3ab7fc.png]: https://img-blog.csdnimg.cn/b681e267cf3d4360aa29e75b2b3ab7fc.png
[ec41757b140b44fb82cc630086d3b796.png]: https://img-blog.csdnimg.cn/ec41757b140b44fb82cc630086d3b796.png
[d25faea3e0b34dd7ac75689ba07af20d.png]: https://img-blog.csdnimg.cn/d25faea3e0b34dd7ac75689ba07af20d.png
[ab860ab599404f84a0a1fa40d34e88e8.png]: https://img-blog.csdnimg.cn/ab860ab599404f84a0a1fa40d34e88e8.png
[f7adb55741784d5ead2135684e7b1458.png]: https://img-blog.csdnimg.cn/f7adb55741784d5ead2135684e7b1458.png
[a58c0efea4f049ed98a7c3338186927a.png]: https://img-blog.csdnimg.cn/a58c0efea4f049ed98a7c3338186927a.png
[ef05413c84844e649a1278672e8534a2.png]: https://img-blog.csdnimg.cn/ef05413c84844e649a1278672e8534a2.png
[4b6d200a78c84386b981933a6925864b.png]: https://img-blog.csdnimg.cn/4b6d200a78c84386b981933a6925864b.png
[d31a50a26d764626a0657cc727c7c65a.png]: https://img-blog.csdnimg.cn/d31a50a26d764626a0657cc727c7c65a.png
[e36efbfa2f524f15aed3ac4d5ed65f5b.png]: https://img-blog.csdnimg.cn/e36efbfa2f524f15aed3ac4d5ed65f5b.png
[284f830c455b46c79e1f1b6c2e756a45.png]: https://img-blog.csdnimg.cn/284f830c455b46c79e1f1b6c2e756a45.png