flex布局_flex 布局概述

最新推荐文章于 2023-07-09 10:40:44 发布
最新推荐文章于 2023-07-09 10:40:44 发布
阅读量221 收藏
点赞数
文章标签： flex布局

flex 布局概述

1. flex 是什么

  • flex 是 Flexible Box 的缩写，意为弹性布局
  • flex 2009 年就已出现，浏览器兼容性很好

2. flex 解决了什么问题

  • 块级元素的垂直居中，flex 可以轻松解决
  • 元素大小在容器中的自动伸缩，以适应容器的变化，特别适合移动端布局

3. flex 项目的布局方向是什么

  • 一个物体在一个平面中，要么水平排列，要么垂直排列，flex 借鉴了这个思想
  • flex 是一维布局，项目任何时候只能沿一个方向排列，要么水平，要么垂直
  • flex 项目排列的方向，称为主轴，水平和垂直二种
  • 与主轴垂直的称为交叉轴

4. flex 容器与项目

  • 容器：需要添加弹性布局的父元素
  • 项目：弹性布局容器中的每一个子元素，称为项目

f20ee1f8942fa44018a89b2d541c52fd.png

| 序号 | 容器/项目 | 默认行为 |

| :--: | ------------------------ | -------------------------------------------- |

| 1 | 容器主轴 | 水平方向 |

| 2 | 项目排列 | 沿主轴起始线排列（当前起始线居左） |

| 3 | 项目类型 | 自动转换“行内块级”元素，不管之前是什么类型 |

| 4 | 容器主轴空间不足时 | 项目自动收缩尺寸以适应空间变化，不会换行显示 |

| 5 | 容器主轴存在未分配空间时 | 项目保存自身大小不会放大并充满空间 |

5. flex 的使用 display: 属性

| 序号 | 属性值 | 描述 | 备注 |

| ---- | ------------- | ------------------ | ---------------------------- |

| 1 | flex; | 创建 flex 块级容器 | 内部子元素自动成为 flex 项目 |

| 2 | inline-flex | 创建 flex 行内容器 | 内部子元素自动成为 flex 项目 |

  • 演示代码：
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>flex基本布局-display</title>

    <style>
      .container {
        width: 300px;
        height: 150px;
        border: 1px solid red;
        /* flex: 容器为块级元素 */
        /* display: flex; */
        /* inline-flex: 容器为行内元素 */
        display: inline-flex;
      }
      .item {
        width: 100px;
        height: 50px;
        background-color: lightseagreen;
        font-size: 1.5rem;
        border: 1px solid lightcoral;
      }
    </style>
  </head>
  <body>
    <h1>display：flex/inline-flex</h1>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
  </body>
</html>
  • 效果图 1：display:flex;

eab11694e742810431e4aa821e1020a0.png
  • 效果图 2：display:inline-flex;

a2fdb9989b1f79226cdb406c87ae3f2c.png

6. flex 容器属性

| 序号 | 属性 | 描述 | | ---- | ----------------- | -------------------------------------------------------------- | | 1 | flex-direction | 设置容器中的主轴方向：行/水平方向，列/垂直方向 | | 2 | flex-wrap | 是否运行创建多行容器，即 flex 项目一行排列不下时，是否运行换行 | | 3 | flex-flow | 简化flex-direction，flex-wrap属性 | | 4 | justify-content | 设置 flex 项目在主轴上对齐方式 | | 5 | align-items | 设置 flex 项目在交叉轴上对齐方式 | | 6 | align-content | 多行容器中，项目在交叉轴上的对齐方式 |

6.1 flex 容器主轴方向 flex-direction: 属性

| 序号 | 属性值 | 描述 | | ---- | ---------------- | -------------------------------------- | | 1 | row默认值 | 主轴水平：起始线居左，项目从左向右显示 | | 2 | row-reverse | 主轴水平：起始线居右，项目从右向左显示 | | 3 | column | 主轴垂直：起始线居上，项目从上向下显示 | | 4 | column-reverse | 主轴垂直：起始线居下，项目从下向上显示 |

  • 演示代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>flex容器主轴方向：flex-direction</title>

    <style>
      .container {
        width: 300px;
        height: 150px;
        border: 1px solid red;
        /* flex: 容器为块级布局; */
        display: flex;

        /* 容器主轴方向 flex-direction: */
        /* row：默认值，主轴从左向右显示 */
        flex-direction: row;
        /* row-reverse：主轴从右向左显示 */
        flex-direction: row-reverse;
        /* column: 主轴从上向下显示 */
        flex-direction: column;
        /* column-reverse：主轴从下向上显示 */
        flex-direction: column-reverse;
      }
      .item {
        width: 100px;
        height: 50px;
        font-size: 1.5rem;
        border: 1px solid coral;
        background-color: darkgreen;
      }
    </style>
  </head>
  <body>
    <h1>flex-direction: row/row-reverse/column/column-reverse</h1>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
  </body>
</html>
  • 效果图 1：flex-direction:row;

f312ca81f38c56053bde57dde30cff4a.png
  • 效果图 2：flex-direction:row-reverse;

a1790e3bbe595289e4bbb0044ce75da7.png
  • 效果图 3：flex-direction:column;

f8c5e066b42f252b18378ba3109da25b.png
  • 效果图 2：flex-direction:column-reverse;

95682bcaffd78ce2b0699e32c2a3e15d.png

6.2 flex 容器主轴项目换行 flex-wrap: 属性

| 序号 | 属性值 | 描述 | | ---- | -------------- | -------------------------------- | | 1 | nowrap默认值 | 项目不换行：单行容器 | | 2 | wrap | 项目换行：多行容器，第一行在上方 | | 3 | wrap-reverse | 项目换行：多行容器，第一行在下方 |

  • 代码演示
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>flex 容器主轴项目换行：flex-wrap</title>
  </head>
  <style>
    .container {
      width: 300px;
      height: 150px;
      border: 1px solid red;
      /* flex: 容器为块级布局; */
      display: flex;

      /* 容器主轴项目换行：flex-wrap */
      /* nowrap：默认值，项目不换行，单行容器 */
      flex-wrap: nowrap;
      /* wrap：项目换行，多行容器，第一行在上方 */
      flex-wrap: wrap;
      /* wrap-reverse：项目换行，多行容器，第一行在下方 */
      flex-wrap: wrap-reverse;
    }
    .item {
      width: 100px;
      height: 50px;
      background-color: greenyellow;
      font-size: 1.5rem;
    }
  </style>
  <body>
    <h1>flex-wrap: nowrap/wrap/wrap-reverse</h1>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
  </body>
</html>
  • 效果图 1：flex-wrap:nowrap;

757d0738268f5121099b2de38b2bf27b.png
  • 效果图 2：flex-wrap:wrap;

3c79f7fdaf1d8a2fea3b4496dffd2a5a.png
  • 效果图 1：flex-wrap:wrap-reverse;

d94ac4d7a126abe9b01a208e23ebb4cc.png

6.3 flex 容器主轴与项目换行简写 flex-flow: 属性

  • flex-flow 是属性 flex-direction 和 flex-wrap 的简写
  • 语法：flex-flow: flex-direction file-wrap

| 属性值 | 描述 | | ------------------- | -------------------- | | row nowrap 默认值 | 主轴水平，项目不换行 |

以后推荐使用此方法设置主轴方向与项目换行属性
  • 代码演示
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>flex 容器主轴与项目换行简写：flex-flow</title>
  </head>
  <style>
    .container {
      width: 300px;
      height: 150px;
      border: 1px solid red;
      /* flex：容器为块级布局 */
      display: flex;

      /* 容器主轴与项目换行：flex-flow */
      /* 默认值，主轴row，不换行 */
      flex-flow: row nowrap;
      /* row wrap：主轴不变，项目换行 */
      flex-flow: row wrap;
      /* row wrap-reverse：主轴不变，项目换行，且从下方开始 */
      flex-flow: row wrap-reverse;
      /* flex-flow 值分别为flex-direction 和flex-wrap值的组合，共计12种 */
    }
    .item {
      width: 100px;
      height: 50px;
      background-color: lightseagreen;
    }
  </style>
  <body>
    <h1>flex-flow:flex-direction flex-wrap</h1>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
  </body>
</html>
  • 效果图：

f85daad76a175b464e5fcb26aa998aad.png

6.4 flex 容器主轴项目对齐 justify-content： 属性

| 序号 | 属性值 | 描述 | | ---- | ---------------- | ------------------------------------------------ | | 1 | flex-start默认 | 所有项目与主轴起始线对齐 | | 2 | flex-end | 所有项目与主轴终止线对齐 | | 3 | center | 所有项目与主轴中线对齐：居中对齐 | | 4 | space-between | 两端对齐：剩余空间在头尾项目之外的项目间平均分配 | | 5 | space-around | 分散对齐：剩余空间在每个项目二侧平均分配 | | 6 | spece-evenly | 平均对齐：剩余空间在每个项目之间平均分配 |

当容器中主轴方向上存在剩余空间时，改属性才有意义
  • 代码演示
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>flex 容器主轴项目对齐：justify-content</title>

    <style>
      .container {
        width: 500px;
        height: 150px;
        border: 1px solid red;
        /* flex：容器为块级元素 */
        display: flex;

        /* 容器主轴项目对齐：justify-content */
        /* flex-start：默认值 */
        justify-content: flex-start;
        /* flex-end：所有项目与主轴终止线对齐 */
        justify-content: flex-end;
        /* conter：居中对齐 */
        justify-content: center;
        /* space-between：两端对齐 */
        justify-content: space-between;
        /* space-around：分散对齐 */
        justify-content: space-around;
        /* space-evenly：平均对齐 */
        justify-content: space-evenly;
      }
      .item {
        width: 100px;
        height: 50px;
        background-color: lightskyblue;
        font-size: 1.5rem;
      }
    </style>
  </head>
  <body>
    <h1>
      justify-content
    </h1>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
  </body>
</html>
  • 效果图 1：justify-content:flex-start;

9a4ae5c6cf2900926611607e444cba59.png
  • 效果图 2：justify-content:end;

ad304d0088fc90df63bb16a51c6e76ae.png
  • 效果图 3：justify-content:center;

76ae1ece97f52cde99273cce25782645.png
  • 效果图 4：justify-content:space-between;

f53050b0df7c7f48b31de68d7267a255.png
  • 效果图 5：justify-content:space-around;

082fd63d8a11e412ca37ea634aaabb22.png
  • 效果图 6：justify-content:space-evenly;

8c1fcf7a951e600c0f377c63ed2acf63.png

6.5 容器交叉轴项目对齐 align-items 属性

  • 该属性仅适用于：单行容器
  • 当容器中交叉轴方向上存在剩余空间时，该属性才有意义

| 序号 | 属性值 | 描述 | | ---- | ---------------- | ---------------------------- | | 1 | flex-start默认 | 与交叉轴起始线对齐 | | 2 | flex-end | 与交叉轴终止线对齐 | | 3 | center | 与交叉轴中间线对齐：居中对齐 |

  • 代码演示：
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>flex 容器交叉轴项目对齐：algin-items</title>
    <style>
      .container {
        width: 500px;
        height: 300px;
        border: 1px solid red;
        /* flex ：容器为块级元素 */
        display: flex;

        /* flex-start: 默认值 */
        align-items: flex-start;
        /* flex-end: 与交叉轴终止线对齐; */
        align-items: flex-end;
        /* center: 与交叉轴中间线对齐：居中对齐 */
        align-items: center;
      }
      .item {
        width: 100px;
        height: 50px;
        background-color: salmon;
      }
    </style>
  </head>
  <body>
    <h1>align-items:flex-start/flex-end/center</h1>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
  </body>
</html>
  • 效果图 1：align-items:flex-start;

aee6866aa345bb590a9eb9cb74d00f90.png
  • 效果图 2：align-items:flex-end;

240abe64990a402bc099902d54308e46.png
  • 效果图 3：align-items:center;

0cb9b8bcadf35f5f7bc001c1dcd6078e.png

6.6 多行容器交叉轴项目对齐 align-content 属性

  • 该属性仅适用于：多行容器
  • 多行容器中，交叉轴会有多个项目，剩余空间在项目之间分配才有意义

| 序号 | 属性值 | 描述 | | ---- | --------------- | ------------------------------------------------ | | 1 | stretch默认 | 项目拉伸占据整个交叉轴 | | 2 | flex-start | 所有项目与交叉轴起始线(顶部)对齐 | | 3 | flex-end | 所有项目与交叉轴终止线对齐 | | 4 | center | 所有项目与交叉轴中间线对齐：居中对齐 | | 5 | space-between | 两端对齐：剩余空间在头尾项目之外的项目间平均分配 | | 6 | space-around | 分散对齐：剩余空间在每个项目二侧平均分配 | | 7 | space-evenly | 平均对齐：剩余空间在每个项目之间平均分配 |

提示：多行容器中通过设置 flex-wrap: wrap| wrap-reverse或者 flex-flow: row wrap|wrap-reverse实现
  • 代码演示：
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>多行容器交叉轴项目对齐：align-content</title>
    <style>
      .container {
        width: 400px;
        height: 150px;
        border: 1px solid red;
        /* flex: 容器为块级元素; */
        display: flex;
        /* 容器内项目运行换行 */
        flex-flow: row wrap;

        /* 默认值：项目拉伸占据整个交叉轴 */
        align-content: stretch;
        /* flex-start: 所有项目与交叉轴起始线（顶部）对齐; */
        /* align-content: flex-start; */
        /* flex-end:素有项目与交叉轴终止线对齐 */
        /* align-content: flex-end; */
        /* center: 所有项目与交叉轴中间线对齐：居中对齐; */
        /* align-content: center; */
        /* space-between:两端对齐 */
        /* align-content: space-between; */
        /* space-around:分散对齐 */
        /* align-content: space-around; */
        /* space-evenly:平均对齐 */
        /* align-content: space-evenly; */
      }
      .item {
        width: 100px;
        height: 50px;
        background-color: salmon;
      }
    </style>
  </head>
  <body>
    <h1>多行容器交叉轴项目对齐:</h1>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
    </div>
  </body>
</html>
  • 效果图 1：align-content:stretch;

1cd88a4ede66765d363a2b3f8662150e.png
  • 效果图 2：align-content:flex-start;

6dfcee46492afbd4780fabc2f3428159.png
  • 效果图 3：align-content:flex-end;

17f1853079622a756cca3c8fd7efcd84.png
  • 效果图 4：align-content:center;

60037994cf62dbd7ce300406c85a8253.png
  • 效果图 5：align-content:space-between;

68b922fdc9d00566d9a9117ee8b4ee8b.png
  • 效果图 6：align-content:space-around;

63773b6ac37ad3e8d9adea1a2be31393.png
  • 效果图 7：align-content:space-evenly;

1cd88a4ede66765d363a2b3f8662150e.png

7 flex 项目属性

| 序号 | 属性 | 描述 | | ---- | ------------- | ----------------------------------------------------------------- | | 1 | order | 定义项目在主轴上的排列顺序，默认为 0，书写顺序，值 越小位置越靠前 | | 2 | flex-basis | 项目宽度：项目分配主轴剩余空间之前，项目所占据的主轴空间宽度 | | 3 | flex-grow | 项目的宽度扩展：将主轴上的剩余空间按比例分配给指定 项目 | | 4 | flex-shrink | 项目的宽度收缩：将项目上多出空间按比例在项目间进行 缩减 | | 5 | flex | 是上面三个属性的简化缩写：flex:flex-grow flex-shrink flex-basis | | 6 | align-self | 独胆自定义某个项目在交叉轴上的对齐方式 |

7.1 自定义项目在主轴上的排列顺序 order属性

默认为 0，书写顺序，值越小位置越靠前 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>自定义项目在主轴上的排列顺序: order</title>
    <style>
      .container {
        width: 500px;
        height: 300px;
        border: 1px solid red;

        display: flex;
      }
      .container > .item {
        width: 100px;
        height: 50px;
        background-color: lightgreen;

        border: 1px solid lightblue;
        box-sizing: border-box;

        order: 0;
      }

      /* 把第一个item放在最后面 */
      .container > .item:first-of-type {
        order: 3;
      }
      /* 把最后一个放在第一位 */
      .container > .item:last-of-type {
        order: -1;
      }
      /* 把第二个放在倒数第二 */
      .container > .item:nth-of-type(2) {
        order: 3;
      }
    </style>
  </head>
  <body>
    <h3>自定义项目在主轴上的排列顺序</h3>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
  </body>
</html>
  • 效果图：

4a6eace0c55000faa21574c2f27bbbd8.png

7.2 flex 项目交叉轴单独对齐 align-self 属性

  • 该属性可覆盖容器的align-items,用以自定义某个项目的对齐方式

| 序号 | 属性值 | 描述 | | ---- | ------------ | -------------------------------- | | 1 | auto默认值 | 继承align-items属性值 | | 2 | flex-statr | 与交叉轴起始线对齐 | | 3 | flex-end | 与交叉轴终止线对齐 | | 4 | center | 与交叉轴中间线对齐：居中对齐 | | 5 | stretch | 与交叉轴方向上拉伸 | | 6 | baseline | 与基线对齐（与内容相关用得极少） |

  • 代码演示：
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>项目交叉轴单独对齐：align-self</title>
    <style>
      .container {
        width: 500px;
        height: 300px;
        border: 1px solid red;

        display: flex;

        /* 设置单行项目在交叉轴上的对齐方式 */
        align-items: center;
      }
      .container > .item {
        width: 100px;
        height: 50px;
        background-color: lightgreen;

        border: 1px solid lightblue;
        box-sizing: border-box;

        font-size: 2.2rem;
      }
      .container > .item:nth-of-type(3) {
        background-color: lightsalmon;

        /* 项目交叉轴单独对齐：align-self(可覆盖容器属性align-items) */
        /* auto:默认值，继承align-items属性值 */
        align-self: auto;
        /* flex-start:与交叉轴起始线对齐 */
        /* align-self: flex-start; */
        /* flex-end:与交叉轴终止线对齐 */
        /* align-self: flex-end; */
        /* center: 居中对齐; */
        /* align-self: center; */
        /* stretch:在交叉轴方向上拉伸 */
        /* align-self: stretch; */
        /* baseline:与基线对齐 */
        /* align-self: baseline; */
      }
    </style>
  </head>
  <body>
    <h3>align-self</h3>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
  </body>
</html>
  • 效果图 1：align-self:auto

d5c47339b3bccd5caf6899d18be6d5c9.png
  • 效果图 2：align-self:flex-start

c5836a1a59ff427c351cb225f560566e.png
  • 效果图 3：align-self:flex-end

79bc4e9e2890b39daa299cc8e1531139.png
  • 效果图 4：align-self:center

0689ce9579c8cf0506c6c5f7f5301ce3.png
  • 效果图 5：align-self:strecth

cf86463905d6918d9c9e9b09d08bd2fe.png
  • 效果图 6：align-self:baseline

88153e63a038a68c858845827c7e0fcc.png

7.3 flex 项目放大因子 flex-grow 属性

  • 在容器主轴上存在剩余空间时，flex-grow才有意义
  • 该属性的值，称为放大因子

| 序号 | 属性值 | 描述 | | ---- | --------- | --------------------- | | 1 | 0默认值 | 不放大，保持初始值 | | 2 | initial | 设置默认值，与0等效 | | 3 | n | 放大因子：正数 |

  • 演示代码：
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>项目放大因子：flex-grow</title>
    <style>
      .container {
        width: 300px;
        height: 150px;
        border: 1px solid red;

        display: flex;
      }
      .container > .item {
        width: 50px;
        height: 50px;
        background-color: lightgreen;

        border: 1px solid lightblue;
        box-sizing: border-box;

        font-size: 2.2rem;

        /* 项目放大因子：flex-grow */
        /* 默认不放大 */
        flex-grow: inherit;
      }
      .container > .item:first-of-type {
        flex-grow: 1;
      }
      .container > .item:nth-of-type(2) {
        flex-grow: 2;
      }
      .container > .item:last-of-type {
        flex-grow: 3;
      }
      /*
      150px要分配给每个项目
      放大因子之和:  150 / (1+2+3) = 25px;
      每个项目根据自己的放大因子来分配
      第一个因子是1, 分到1 * 25 =25, 50 + 25 = 75px
      第二个因子是2, 分到2 * 25 = 50 , 50 +50 = 100px
      第三个因子是3, 分到3*25 = 75px, 50 + 75px = 125px;
      */
    </style>
  </head>
  <body>
    <h3>flex-grow</h3>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
  </body>
</html>
  • 效果图：flex-grow:

2a595ba822901e1afd66246c1bb473be.png

7.4 flex 项目收缩因子 flex-shrink 属性

  • 当容器主轴，“空间不足”且“禁止换行”时，flex-shrink才有意义
  • 该属性的值，称为收缩因子

| 序号 | 属性值 | 描述 | | ---- | --------- | ------------------------- | | 1 | 1默认值 | 允许项目收缩 | | 2 | initial | 设置初始默认值，与 1 等效 | | 3 | 0 | 禁止收缩，保持原始尺寸 | | 4 | n | 收缩因子：正数 |

  • 代码演示：
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>项目收缩因子：flex-shrink</title>
    <style>
      .container {
        width: 180px;
        height: 150px;
        border: 1px solid red;

        display: flex;
      }
      .container > .item {
        width: 100px;
        height: 50px;
        background-color: lightgreen;

        border: 1px solid lightblue;
        box-sizing: border-box;

        font-size: 2.2rem;

        /* 项目收缩因子：flex-shrink */
        /* 禁止收缩 */
        flex-shrink: 0;
      }
      .container > .item:first-of-type {
        flex-shrink: 1;
      }
      .container > .item:nth-of-type(2) {
        flex-shrink: 2;
      }
      .container > .item:last-of-type {
        flex-shrink: 3;
      }
      /*
      当前三个项目宽度超出了主轴空间多少: 300 - 180 = 120px, 说明有120px要让三个项目消化掉
      三个项目的收缩因子之和: 6
      每一份就是: 120 /6 = 20
      第一个项目:  100 - 1 * 20 = 80px
      第二个项目: 100 - 2* 20 = 60px
      第三个项目: 100 - 2* 30 = 40px
      */
    </style>
  </head>
  <body>
    <h3>align-self</h3>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
  </body>
</html>
  • 效果图： flex-shrink:

706f3ae1f1a82dea60cb00514fa10691.png

7.5 flex 项目计算尺寸 flex-basis 属性

  • 在分配多余空间之前，项目占据的主轴空间
  • 浏览器根据这个属性，计算主轴是否有多余空间
  • 该属性会覆盖项目原始大小（width/height）
  • 该属性会被项目的min-width/min-height值覆盖

| 序号 | 属性值 | 描述 | | ---- | ------ | ---------------------- | | 1 | auto | 默认值：项目原来的大小 | | 2 | px | 像素 | | 3 | % | 百分比 |

优先级：项目大小 < flex-basis< min-width/height
  • 代码演示：
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>项目在主轴上的计算宽度</title>
    <style>
      /* 容器 */
      .container {
        width: 300px;
        height: 150px;
        border: 1px solid red;
      }
      /* 将容器/父元素设置为flex容器 */
      .container {
        display: flex;
        flex-flow: row wrap;
      }

      /* 项目/子元素 */
      .item {
        width: 50px;
        height: 50px;
        background-color: cyan;
        font-size: 1.5rem;
      }

      .item {
        /* auto === width */
        flex-basis: auto;
        /* flex-basis: 权重大于width; */
        flex-basis: 70px;
        flex-basis: 20%;
        flex-basis: 5rem;
        /* min-width / max-width 权重大于flex-basis; */
        max-width: 100px;

        flex-basis: 150px;

        /* width < flex-basis < min/max-width; */
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
  </body>
</html>
  • 效果图 1：flex-basis:auto

9338654694afca7a47974709506626d6.png
  • 效果图 2：flex-basis:70px

58b80428ddb38a9e584e26e08afcfed7.png
  • 效果图 3：flex-basis:20%

5b922acb6fd0f36c8b89a14fe3532d25.png
  • 效果图 4：flex-basis:5rem

1e8b5b1baecc069fc56f2d7f9102fccc.png
  • 效果图 5：max-width:100px

f41be33b863dca67d758366e0ea23913.png
  • 效果图 6：flex-basis:150px

b16f2e3b2dd6f729dee98584d4ea816a.png

7.6 项目缩放的简写 flex 属性

7.6.1 flex 属性

  • 项目放大，缩小与计算尺寸，对于项目非常重要，也很常用
  • 每次都要写这三个属性，非常的麻烦，且没有必要
  • flex属性，可以将以上三个属性进行简化：
  • 语法：flex: flex-grow flex-shrink flex-basis

7.6.2 三值语法

| 序号 | 属性值 | 描述 | | ---- | ------------------ | ------------- | | 1 | 第一个值：整数 | flex-grow | | 2 | 第二个值：整数 | flex-shrink | | 3 | 第三个值：有效宽度 | flex-basis |

举例：

| 序号 | 案例 | 描述 | | ---- | ----------------- | -------------------------------- | | 1 | flex: 0 1 auto | 默认值：不放大，可收缩，初始宽度 | | 2 | flex: 1 1 auto | 项目自动放大或者收缩适应容器 | | 3 | flex: 0 0 100px | 按计算大小填充到容器 |

7.6.3 双值语法

| 序号 | 属性值 | 描述 | | ---- | ------------------ | ------------ | | 1 | 第一个值：整数 | flex-grow | | 2 | 第二个值：有效宽度 | flex-basis |

举例：

| 案例 | 描述 | | -------------- | -------------------------------- | | flex:0 180px | 禁止放大，按计算大小填充到容器中 |

7.6.4 单值语法

| 序号 | 属性值 | 描述 | | ---- | -------- | ------------------- | | 1 | 整数 | flex-grow | | 2 | 有效宽度 | flex-basis | | 3 | 关键字 | initial|auto|none |

举例：

| 序号 | 案例 | 描述 | | ---- | ------------ | ---------------- | | 1 | flex:1 | flex:1 1 auto | | 2 | flex:180px | flex:1 1 180px | | 3 | initial | flex:0 1 auto | | 4 | auto | flex:1 1 auto | | 5 | none | flex:0 0 auto |

推荐使用 flex,就像推荐使用 flex-grow设置主轴与换行一样
  • 演示代码：
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>flex</title>
    <style>
      /* 容器 */
      .container {
        width: 300px;
        height: 150px;
      }
      /* 将容器/父元素设置为flex容器 */
      .container {
        display: flex;
      }

      /* 项目/子元素 */
      .item {
        width: 100px;
        height: 50px;
        background-color: cyan;
        font-size: 1.5rem;
      }

      .item:first-of-type {
        background-color: lightgreen;

        /* 默认:不放大,允许收缩, 以项目的width为准 */
        flex: 0 1 auto;
        flex: 1 1 auto;
        /* flex: 0 1 80px; */
      }
      .item:nth-of-type(2) {
        background-color: lightcoral;

        flex: 0 100px;
      }
      .item:last-of-type {
        background-color: wheat;

        flex: auto;
        flex: 1;

        flex: none;

        flex: 0 0 auto;
        flex: 0 0 250px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
  </body>
</html>

8 flex 布局总结

  1. 引入 flex 布局容器：display: flex/inline-flex
  2. flex 容器变为块级元素
  3. inline-flex 容器变为行级元素
  4. flex 容器的六大属性:

| 序号 | 属性 | 描述 |

| ---- | ----------------- | ---------------------------------- |

| 1 | flex-direction | 设置主轴方向 | | 2 | flex-wrap | 设置是否换行 | | 3 | flex-flow | 前两个的简写 | | 4 | justify-content | 主轴方向上项目的对齐方式 | | 5 | align-items | 交叉轴上项目的对齐方式 | | 6 | align-content | 交叉轴上项目的对齐方式（多行项目） |

flex 容器的属性可以简写为四个： flex-flow,justify-content,align-items,align-content
  1. flex 项目的六大属性:

| 序号 | 属性值 | 描述 | | ---- | ------------- | -------------------- | | 1 | order | 自定义项目的排序 | | 2 | align-self | 项目在交叉轴上的位置 | | 3 | flex-grow | 放大因子 | | 4 | flex-shrink | 缩放因子 | | 5 | flex-basis | 项目宽度 | | 6 | flex | 上面三个的简写 |

flex 项目的属性可以简写为三个： order,align-self,flex
weixin_39737492
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
flex布局简介
weixin_34260991的博客
10-20 110
一、概述 浮动在移动布局中不再重要，flex盒模型越来越重要。 flexbox经历过三个版本，主要区别是2009年到2012年之间的语法变化。 最新的语法和现在规范是同步的（例display:flex和“flex-{*}”属性）。 在这之间的语法是2011年出现的非官方语法，只能被IE识别（例display:flexbox;display: -ms-flexbox）。 最老的语法...
【css】flex布局语法简述
hello world_
09-23 620
网页布局（layout）是 CSS 的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用...
Flex布局知识点概述
guanguan0_0的博客
07-04 306
Flex布局：FlexibleBox的缩写，意为“弹性布局”，为盒模型提供巨大的灵活性使用说明：1.任何容器都可以使用flex布局.box { display: flex;}2.行内元素可以使用flex布局.box{ display: inline-flex;}3.webkit内核的浏览器，要加上-webkit前缀.box{ display: -webkit-flex;...
flex布局模式简单概述
weixin_30548917的博客
06-30 99
CSS3中新增一种弹性布局模型：flexbox。网上关于flex的介绍很多，这里介绍下常用的几个属性。弹性布局的特点是非常灵活。可根据剩余的宽高，灵活布局。 先用图片说明flex具有哪些属性。（网上盗的图） 上图中flex容器即是父元素，flex项目为子元素。 属性说明 1.首先在父元素中定义display:flex; 2.flex-direction:属性用来控制伸缩容器中主...
flex布局介绍和简单案例
xiasohuai的博客
07-21 8790
flex布局可以帮我们快速布局一些区块,实现你想要的效果,不用再去float,position之类的.我们在布局网页的时候很多时候都是一些特殊布局,flex就能帮我快速去布局,不需要去定位. 任何一个盒子都可以指定为flex布局,但是要注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。 基本案例1： &lt;ul&gt; &lt;li...
Flex_Viewer解析
09-17
#### 一、Flex_Viewer概述与结构 Flex_Viewer是一个由ESRI提供的开源GIS（地理信息系统）框架，旨在帮助开发者构建基于Adobe Flex技术的地图应用程序。它提供了一种简单的方法来集成地图服务，并允许创建复杂的GIS...
Flex4_Tutorials中文版
06-29
1. **Flex 4概述**：Flex 4引入了全新的Spark组件模型，与之前的 Halo 组件相比，Spark组件更加轻量级，可定制性更强，设计时支持皮肤和样式分离，极大地提高了UI设计的灵活性。此外，Flex 4还引入了ActionScript ...
简述flex布局
最新发布
m0_47791238的博客
07-09 366
Flex布局（也称为弹性盒子布局）是一种CSS布局模型，用于在容器中实现灵活的、自适应的元素布局。通过使用Flex布局，我们可以轻松地创建水平或垂直方向上的自适应布局，使元素能够根据可用空间进行伸缩和分布。
Flex布局简述
梦是太匆
09-10 985
目录 1.什么是Flex布局 2.基本概念 3.容器属性 3.1 flex-direction属性 3.2 flex-wrap属性 3.3 flex-flow属性 3.4 justify-content属性 3.5 align-items属性 3.6 align-content属性 4.项目属性 4.1 order属性 4.2 flex-grow属性 4.3 fle...
Flex布局详解
echomsy的博客
07-19 411
1. 认识flex布局 flex布局，也叫做弹性布局，是目前web开发中使用最多的布局方案。 任何元素都可以指定为flex布局 行内元素开启flex布局 .box { display: inline-flex; } 块级元素开启flex布局 .box { display: flex; } 如果是Webkit内核的浏览器，需要加上-webkit前缀。 2. flex布局的重要概念 flex container：开启flex布局的元素叫做容器(flex container) flex item
flex布局详细介绍
Super_Tyr的博客
03-03 381
flex布局 简介 Flex：“Flexible box”的缩写，即弹性布局 轴 x为主轴，y轴为交叉轴 开始 容器属性（父） flex-direction（子元素排列起点） row（默认）起点在左 row-reverse 起点在右 column 起点在上 column-reverse 起点在下 附图 ...
Flex布局语法简介
sTaANn的博客
10-20 408
Flex流体布局：可以简便、完整、响应式地实现各种页面布局 流体布局兼容性： flex 任意容器都可以指定flex布局，所有子元素称为容器成员，简称（flex item） 行内元素：inline-flex webkit内核加上 -webkit display： -webkit-flex 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失
flex:1简述
或许丶Blog
12-27 172
.item1{ flex:1; } .item2{ flex-grow: 1; flex-shrink: 1; flex-basis: 0%; } 让所有弹性盒模型对象的子元素都有相同的长度，忽略它们内部的内容： 定义和用法 flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。 flex 属性是 flex-grow、flex-shrink 和 flex-basi...
HTML+CSS面试题-简述 flex 布局与 grid 布局，二者有什么不同，伪类和伪元素的区别及应用样式
weixin_44486539的博客
11-24 612
简述 flex 布局与 grid 布局，二者有什么不同 flex 弹性布局；grid 二维布局。 flex就是沿着一条线铺下去，这个线可能水平，也可能垂直，这个平铺的方向用flex-direction来控制。 所以flex才有换行命令。而且当同级小盒子很多的时候，往往动一发而动全身，很不方便。 grid是把盒子用线分成很多份，把小盒子一个个填进去。 伪类和伪元素的区别及应用样式 伪类：向某些选择...
什么是flex布局
qq_43375584的博客
03-05 620
flex布局（弹性布局） 是一种浏览器提倡的布局模型 布局网页更简单、灵活 避免浮动脱标的问题 (flex布局不会脱标) 注意：如果子盒子没有设置高度，子盒子将会拉伸填满父盒子高度 flex布局模型盒子构成 目标：能够使用Flex布局模型灵活、快速的开发网页 作用： 基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。 Flex布局非常适合结构化布局 设置方式：父元素添加d
什么是flex布局？
AiYa_He的博客
05-27 631
什么是flex布局？ 注意：设为flex布局以后，子元素的float、clear和vertical-align属性将失效。 采用Flex布局的元素，称为Flex容器。容器内所有子元素称为flex项目。容器内会生成两条轴，分别是沿水平方向的主轴和垂直方向的交叉轴。 项目默认沿主轴排列。 容器有六个属性 1. flex-direction:项目的排列方向 row（默认值）：主轴为水平方向，起点在左端 row-reverse:主轴为水平方向，起点在右端 column:主轴为垂直方向，起点在上沿 column
Flex_Viewer编程实战教程：从入门到精通
以下是关键知识点的概述： 1. **准备知识** - **技能与软件需求**: 开发者需要具备Flex编程基础，熟悉ActionScript语言，以及对GIS和ArcGIS API有一定的理解。此外，开发环境要求包括Adobe Flex Builder、Flex SDK...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值