CSS3 弹性盒子(flex、flex-direction属性、flex-wrap属性、align-items属性、align-content属性)详解

我不是女神ヾ 2024-03-30 14:49 66阅读 0赞

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

*  flex
 *  flex-direction 属性
 *  flex-wrap 属性
 *  align-items 属性
 *  align-content 属性的使用

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

## flex ##

*  在 CSS3 中给 display 属性增加了新的属性值 flex，如果一个元素被设置 display:flex，说明该元素为弹性布局，也就是个弹性盒子。 flex 主要由两个轴来控制布局，如下图所示。  
    ![在这里插入图片描述][a9a6d8dd0d314753985920676008257f.png]  
    `上图说明如下：`
 *  main axis 是主轴，该轴的开始为 main start，结束为 main end。
 *  cross axis 是交叉轴，该轴的开始为 cross start，结束为 cross end。
 *  flex item 是 flex 容器中的元素。

## flex-direction 属性 ##

*  flex-direction 属性指定了弹性子元素在父容器中的排列方向和顺序。 其语法格式为：

flex-direction: row | row-reverse | column | column-reverse;

*  其属性值的意义如下所示：

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

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
          .content1 {
        
            width: 200px;
            height: 200px;
            border: 1px solid #c3c3c3;
            display: flex;
            flex-direction: row; /*默认值，行对齐，主轴起点与终点相同*/
          }
          .content2 {
        
            width: 200px;
            height: 200px;
            border: 1px solid #c3c3c3;
            display: flex;
            flex-direction: row-reverse; /*行对齐，主轴起点与终点相反*/
          }
          .content3 {
        
            width: 200px;
            height: 200px;
            border: 1px solid #c3c3c3;
            display: flex;
            flex-direction: column; /*列对齐，主轴起点与终点相同*/
          }
          .content4 {
        
            width: 200px;
            height: 200px;
            border: 1px solid #c3c3c3;
            display: flex;
            flex-direction: column-reverse; /*列对齐，主轴起点与终点相反*/
          }
          .box {
        
            width: 50px;
            height: 50px;
            color: black;
          }
        </style>
      </head>
      <body>
        <div class="content1">
          <div class="box" style="background-color:#FFE5B9;">A</div>
          <div class="box" style="background-color:#EFF8FF;">B</div>
          <div class="box" style="background-color:#C9CBFF;">C</div>
        </div>
        <div class="content2">
          <div class="box" style="background-color:#FFE5B9;">A</div>
          <div class="box" style="background-color:#EFF8FF;">B</div>
          <div class="box" style="background-color:#C9CBFF;">C</div>
        </div>
        <div class="content3">
          <div class="box" style="background-color:#FFE5B9;">A</div>
          <div class="box" style="background-color:#EFF8FF;">B</div>
          <div class="box" style="background-color:#C9CBFF;">C</div>
        </div>
        <div class="content4">
          <div class="box" style="background-color:#FFE5B9;">A</div>
          <div class="box" style="background-color:#EFF8FF;">B</div>
          <div class="box" style="background-color:#C9CBFF;">C</div>
        </div>
      </body>
    </html>

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

## flex-wrap 属性 ##

*  flex-wrap 属性用于指定弹性盒子的子元素换行方式。 其语法格式为：

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

*  其属性值的意义如下所示：  
    ![在这里插入图片描述][1f9ec4881bd04eef813370d635bf5833.png]

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
          div {
        
            width: 100px;
            height: 100px;
            color: black;
          }
    
          #content {
        
            width: 240px;
            height: 300px;
            background-color: white;
            display: flex;
            flex-wrap: wrap-reverse;
          }
          .item1 {
        
            background-color: #ffe5b9;
          }
          .item2 {
        
            background-color: #eff8ff;
          }
          .item3 {
        
            background-color: #c9cbff;
          }
        </style>
      </head>
      <body>
        <div id="content">
          <div class="item1">1</div>
          <div class="item2">2</div>
          <div class="item3">3</div>
        </div>
      </body>
    </html>

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

## align-items 属性 ##

*  align-items 属性是用来设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。 其语法格式为：

align-items: flex-start | flex-end | center | baseline | stretch;

*  其属性值的意义如下所示：  
    ![在这里插入图片描述][68739a69548240abacdc3db3fc1d0e27.png]

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
          div {
        
            width: 100px;
            color: black;
          }
    
          #content {
        
            width: 240px;
            height: 300px;
            background-color: white;
            display: flex;
            align-items: stretch;
          }
          .item1 {
        
            background-color: #ffe5b9;
          }
          .item2 {
        
            background-color: #eff8ff;
          }
          .item3 {
        
            background-color: #c9cbff;
          }
        </style>
      </head>
      <body>
        <div id="content">
          <div class="item1">1</div>
          <div class="item2">2</div>
          <div class="item3">3</div>
        </div>
      </body>
    </html>

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

## align-content 属性的使用 ##

*  align-content 属性可以用于控制多行的对齐方式，如果只有一行则不会起作用。 其语法格式为：

*  其属性值的意义为：  
    ![在这里插入图片描述][1c2148886b024e97891b899ae145ad72.png]

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
          div {
        
            width: 60px;
            color: black;
          }
          #content {
        
            width: 300px;
            height: 300px;
            background-color: antiquewhite;
            display: flex;
            flex-wrap: wrap;
            align-content: stretch;
          }
          .left {
        
            background-color: gray;
          }
          .center {
        
            background-color: silver;
          }
          .right {
        
            background-color: darkgray;
          }
        </style>
      </head>
      <body>
        <div id="content">
          <div class="left">div1块</div>
          <div class="center">div2块</div>
          <div class="right">div3块</div>
          <div class="left">div4块</div>
          <div class="center">div5块</div>
          <div class="right">div6块</div>
          <div class="left">div7块</div>
          <div class="center">div8块</div>
          <div class="right">div9块</div>
          <div class="left">div10块</div>
          <div class="center">div11块</div>
          <div class="right">div12块</div>
        </div>
      </body>
    </html>

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

[a9a6d8dd0d314753985920676008257f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/452dcfa1a0474a58bbc2fcba3096bb00.png
[1a2e378b40c148a7902355bb3109288f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/bd2445d04e3b46b990b2d7fb61a7bbcb.png
[74c14560fe824111adee2a91f8b993d6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/839fc74c99314f919a730a0412a500ec.png
[1f9ec4881bd04eef813370d635bf5833.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/c4546d2355084fdda019521d0b1344ca.png
[d19d23370eba4964b12ed80c6cf09738.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/6862b175b24643c3905ba6c7a39042e0.png
[68739a69548240abacdc3db3fc1d0e27.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/54ed181311b446f5ba22909de9fb3447.png
[856952f670f1496fa16521e947d539bf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/40560ca7d3cc412c94b31e88b4100b95.png
[1c2148886b024e97891b899ae145ad72.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/6c04c3adb71d43d686c39551c8435464.png
[4d808d43fc2a4fbab8b1ec19b270db88.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/4cf71deeae054a858c3ab997be46efbf.png