flex布局

原创已于 2022-07-22 09:20:36 修改 · 159 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #css3

于 2022-07-21 18:03:49 首次发布

本文深入探讨了CSS Flex布局（ Flexible Box），一种现代的网页布局解决方案，旨在解决传统布局模式的痛点，如元素的对齐、排列和响应式设计。主要内容包括flexbox的概念、重要属性如flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content以及flex-item的相关属性如order、align-self、flex-grow、flex-shrink和flex-basis。通过实例展示了如何使用这些属性实现各种灵活的布局效果，并强调了其在移动端和PC端的广泛应用及兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

flex布局

一、认识flexbox

Flexbox翻译为弹性盒子:
- 弹性盒子是一种用于按行或按列布局元素的一维布局方法 ;
- 元素可以膨胀以填充额外的空间, 收缩以适应更小的空间;
- 通常我们使用Flexbox来进行布局的方案称之为flex布局(flex layout);
flex布局是目前web开发中使用最多的布局方案：
- flex 布局（Flexible 布局，弹性布局）;
- 目前特别在移动端可以说已经完全普及;
- 在PC端也几乎已经完全普及和使用, 只有非常少数的网站依然在用浮动来布局;
为什么需要flex布局呢?
- 长久以来，CSS 布局中唯一可靠且跨浏览器兼容的布局工具只有 floats 和 positioning。
- 但是这两种方法本身存在很大的局限性, 并且他们用于布局实在是无奈之举;
原先的布局存在的痛点
- 原来的布局存在哪些痛点呢? 举例说明:
  - 比如在父内容里面垂直居中一个块内容。
  - 比如使容器的所有子项等分可用宽度/高度，而不管有多少宽度/高度可用。
  - 比如使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同。
flexbox在使用时, 我们最担心的是它的兼容性问题:
我们可以在caniuse上查询到具体的兼容性
flex布局的重要概念
- 两个重要的概念：
  - 开启了 flex 布局的元素叫 flex container
  - flex container 里面的直接子元素叫做 flex item
- 当flex container中的子元素变成了flex item时, 具备一下特点:
  - flex item的布局将受flex container属性的设置来进行控制和布局
  - flex item不再严格区分块级元素和行内级元素;
  - flex item默认情况下是包裹内容的, 但是可以设置宽度和高度;
- 设置 display 属性为 flex 或者 inline-flex 可以成为 flex container
  - flex： flex container 以 block-level 形式存在
  - inline-flex： flex container 以 inline-level 形式存在
- flex布局的模型
  - flex相关的属性

flex-direction

flex items 默认都是沿着 main axis（主轴）从 main start 开始往 main end 方向排布

flex-direction 决定了 main axis 的方向，有 4 个取值

row（默认值）、row-reverse、column、column-reverse

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .contaicer {
      width: 500px;
      height: 500px;
      background-color: orange;

      display: flex;
      /* 
        flex-direction的四个值：修改主轴方向
        row ：行变成主轴方向
        row-reverse ：row的翻转
        column：列变成主轴方向
        column-reverse：column的翻转
      */

      flex-direction: row;
    }

    .item {
      width: 120px;
      height: 120px;
      background-color: #f00;
    }
  </style>
</head>

<body>

  <div class="contaicer">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <!-- <div class="item item4">4</div>
    <div class="item item5">5</div> -->
  </div>

  <script src="./js/itemRandomColor.js"></script>
</body>

</html>

flex-wrap

flex-wrap 决定了 flex container 是单行还是多行

nowrap（默认）：单行
wrap：多行
wrap-reverse：多行（对比 wrap，cross start 与 cross end 相反）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .contaicer {
      width: 500px;
      height: 500px;
      background-color: orange;

      display: flex;

      /* 
        nowrap: 默认值
        wrap：多行
        wrap-reverse：多行翻转
      */
      /* flex-wrap: wrap; */
      /* flex-flow: wrap;  */
      flex-flow: column wrap;
    }

    .item {
      width: 120px;
      height: 120px;
      background-color: #f00;
    }
  </style>
</head>

<body>

  <div class="contaicer">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
  </div>

  <script src="./js/itemRandomColor.js"></script>
</body>

</html>

flex-flow

flex-flow 属性是 flex-direction 和 flex-wrap 的简写。

顺序任何, 并且都可以省略;

MDN上的语法：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .contaicer {
      width: 500px;
      height: 500px;
      background-color: orange;

      display: flex;
      flex-flow: column-reverse wrap-reverse;
    }

    .item {
      width: 120px;
      height: 120px;
      background-color: #f00;
    }
  </style>
</head>

<body>

  <div class="contaicer">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <!-- <div class="item item4">4</div>
    <div class="item item5">5</div> -->
  </div>

  <script src="./js/itemRandomColor.js"></script>
</body>

</html>

justify-content

justify-content 决定了 flex items 在 main axis 上的对齐方式

flex-start（默认值）：与 main start 对齐
flex-end：与 main end 对齐
center：居中对齐
space-between：
- flex items 之间的距离相等
- 与 main start、main end两端对齐
space-around：
- flex items 之间的距离相等
- flex items 与 main start、main end 之间的距离是 flex items 之间距离的一半

space-evenly：

flex items 之间的距离相等
flex items 与 main start、main end 之间的距离等于 flex items 之间的距离

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      width: 500px;
      height: 500px;
      background-color: orange;

      display: flex;
      /*flex-start: 默认值，与main start对齐  */
      /* flex-end: 与main end对齐 */
      /* center: 居中对齐 */
      /* space-between：flex items 之间的距离相等，与main start、main end两端对齐 */
      /* space-evenly：flex items之间的间隙相等，flex items与main start 、main end之间的距离等于flex items之间的间隙 */
      /* space-around：flex items之间的间隙相等，flex items与main start 、main end之间的距离等于flex items之间的距离的一半 */
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .item {
      width: 120px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
  </div>

  <script src="./js/itemRandomColor.js"></script>
</body>

</html>

align-item

align-items 决定了 flex items 在 cross axis 上的对齐方式
normal：在弹性布局中，效果和stretch一样
stretch：当 flex items 在 cross axis 方向的 size 为 auto 时，会自动拉伸至填充 flex container
flex-start：与 cross start 对齐
flex-end：与 cross end 对齐
center：居中对齐
baseline：与基准线对齐

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      width: 500px;
      height: 500px;
      background-color: orange;

      display: flex;
      align-items: center;
    }

    .item {
      width: 120px;
      /* height: 100px; */
      background-color: red;
    }

    .item2 {
      height: 80px;
      font-size: 30px;
    }

    .item3 {
      height: 130px;
      font-size: 40px;
    }

    .item4 {
      height: 160px;
      font-size: 12px;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="item item1">1x</div>
    <div class="item item2">2x</div>
    <div class="item item3">3x</div>
    <div class="item item4">2x</div>
    <div class="item item5">3x</div>

  </div>

  <script src="./js/itemRandomColor.js"></script>
</body>

</html>

align-content

align-content 决定了多行 flex items 在 cross axis 上的对齐方式，用法与 justify-content 类似

stretch（默认值）：与 align-items 的 stretch 类似
flex-start：与 cross start 对齐
flex-end：与 cross end 对齐
center：居中对齐
space-between： flex items 之间的距离相等与 cross start、cross end两端对齐
space-around： flex items 之间的距离相等 flex items 与 cross start、cross end 之间的距离是 flex items 之间距离的一半
space-evenly： flex items 之间的距离相等 flex items 与 cross start、cross end 之间的距离等于 flex items 之间的距离

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      width: 500px;
      height: 500px;
      background-color: orange;

      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      align-content: flex-start;
    }

    .item {
      width: 120px;
      height: 100px;
      background-color: red;
    }

    /* .item2 {
      height: 80px;
      font-size: 30px;
    }

    .item3 {
      height: 130px;
      font-size: 40px;
    }

    .item4 {
      height: 160px;
      font-size: 12px;
    } */
  </style>
</head>

<body>

  <div class="container">
    <div class="item item1">1x</div>
    <div class="item item2">2x</div>
    <div class="item item3">3x</div>
    <div class="item item4">4x</div>
    <div class="item item5">5x</div>
    <div class="item item6">6x</div>

  </div>

  <script src="./js/itemRandomColor.js"></script>
</body>

</html>

flex-item属性 - order

order 决定了 flex items 的排布顺序

可以设置任意整数（正整数、负整数、0），值越小就越排在前面
默认值是 0

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      width: 500px;
      height: 500px;
      background-color: orange;

      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

    }

    .item {
      width: 120px;
      height: 100px;
      background-color: red;
    }

    .item2 {
      order: 2;
      height: 80px;
      font-size: 30px;
    }

    .item3 {
      order: -1;
      height: 130px;
      font-size: 40px;
    }

    .item4 {
      order: 0;
      height: 160px;
      font-size: 12px;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="item item1">1x</div>
    <div class="item item2">2x</div>
    <div class="item item3">3x</div>
    <!-- <div class="item item4">4x</div>
    <div class="item item5">5x</div>
    <div class="item item6">6x</div> -->

  </div>

  <script src="./js/itemRandomColor.js"></script>
</body>

</html>

flex-item属性 - align-self

flex items 可以通过 align-self 覆盖 flex container 设置的 align-items
- auto（默认值）：遵从 flex container 的 align-items 设置
- stretch、flex-start、flex-end、center、baseline，效果跟 align-items 一致

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      width: 500px;
      height: 500px;
      background-color: orange;

      display: flex;
      align-items: center;

    }

    .item {
      width: 120px;
      height: 100px;
      background-color: red;
    }

    .item2 {
      align-self: flex-start;
      height: 80px;
      font-size: 30px;
    }

    .item3 {

      height: 130px;
      font-size: 40px;
    }

    .item4 {
      height: 160px;
      font-size: 12px;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="item item1">1x</div>
    <div class="item item2">2x</div>
    <div class="item item3">3x</div>
    <!-- <div class="item item4">4x</div>
    <div class="item item5">5x</div>
    <div class="item item6">6x</div> -->

  </div>

  <script src="./js/itemRandomColor.js"></script>
</body>

</html>

flex-item属性 - flex-grow

flex-grow 决定了 flex items 如何扩展(拉伸/成长)

可以设置任意非负数字（正小数、正整数、0），默认值是 0
当 flex container 在 main axis 方向上有剩余 size 时，flex-grow 属性才会有效
如果所有 flex items 的 flex-grow 总和 sum 超过 1，每个 flex item 扩展的 size 为
- flex container 的剩余 size * flex-grow / sum
flex items 扩展后的最终 size 不能超过 max-width\max-height

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      width: 500px;
      height: 500px;
      background-color: orange;

      display: flex;

    }

    .item {
      width: 120px;
      height: 100px;
      background-color: red;
      flex-grow: 0;
    }

    .item2 {
      flex-grow: 1;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="item item1">1x</div>
    <div class="item item2">2x</div>
    <div class="item item3">3x</div>
    <!-- <div class="item item4">4x</div>
    <div class="item item5">5x</div>
    <div class="item item6">6x</div> -->

  </div>

  <script src="./js/itemRandomColor.js"></script>
</body>

</html>

flex-item属性 - flex-shrink

flex-shrink 决定了 flex items 如何收缩(缩小)
- 可以设置任意非负数字（正小数、正整数、0），默认值是 1
- 当 flex items 在 main axis 方向上超过了 flex container 的 size，flex-shrink 属性才会有效
- 如果所有 flex items 的 flex-shrink 总和超过 1，每个 flex item 收缩的 size为
  - flex items 超出 flex container 的 size * 收缩比例 / 所有 flex items 的收缩比例之和
flex items 收缩后的最终 size 不能小于 min-width\min-height

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      width: 500px;
      height: 500px;
      background-color: orange;

      display: flex;

    }

    .item {
      width: 120px;
      height: 100px;
      background-color: red;
      flex-shrink: 0;
    }

    .item2 {
      flex-shrink: 1;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="item item1">1x</div>
    <div class="item item2">2x</div>
    <div class="item item3">3x</div>
    <div class="item item4">4x</div>
    <div class="item item5">5x</div>


  </div>

  <script src="./js/itemRandomColor.js"></script>
</body>

</html>

flex-item属性 - flex-basis

flex-basis 用来设置 flex items 在 main axis 方向上的 base size
- auto（默认值）、具体的宽度数值（100px）
决定 flex items 最终 base size 的因素，从优先级高到低
- max-width\max-height\min-width\min-height
- flex-basis
- width\height
- 内容本身的 size

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      width: 500px;
      height: 500px;
      background-color: orange;

      display: flex;

    }

    .item {
      /* width: 120px; */
      flex-basis: 120px;
      height: 100px;
      background-color: red;

    }

   
  </style>
</head>

<body>

  <div class="container">
    <div class="item item1">1x</div>
    <div class="item item2">2x456464654coderlin_why_lin</div>
    <div class="item item3">3x</div>



  </div>

  <script src="./js/itemRandomColor.js"></script>
</body>

</html>

flex-item属性 - flex属性

flex 是 flex-grow || flex-shrink || flex-basis 的简写,flex 属性可以指定1个，2个或3个值。
单值语法: 值必须为以下其中之一:
- 一个无单位数(): 它会被当作的值。
- 一个有效的宽度(width)值: 它会被当作的值。
- 关键字none，auto或initial.
双值语法: 第一个值必须为一个无单位数，并且它会被当作的值。
- 第二个值必须为以下之一：
  - 一个无单位数：它会被当作的值。
  - 一个有效的宽度值: 它会被当作的值。
三值语法:
- 第一个值必须为一个无单位数，并且它会被当作的值。
- 第二个值必须为一个无单位数，并且它会被当作的值。
- 第三个值必须为一个有效的宽度值，并且它会被当作的值。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      width: 500px;
      height: 500px;
      background-color: orange;

      display: flex;

    }

    .item {
      width: 120px;

      height: 100px;
      background-color: red;
      /* flex-grow flex-shrink flex-basis */
      /* none: 0 0 auto */
      /* auto: 1 1 auto */
      flex: auto;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="item item1">1x</div>
    <div class="item item2">2x</div>
    <div class="item item3">3x</div>
    <!-- <div class="item item3">3x</div> -->



  </div>

  <script src="./js/itemRandomColor.js"></script>
</body>

</html>

案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      width: 500px;
      height: 500px;
      background-color: orange;

      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

    }

    .container>i {
      width: 140px;
    }

    .item {
      width: 140px;

      height: 140px;
      background-color: red;

    }
  </style>
</head>

<body>

  <div class="container">
    <div class="item item1">1x</div>
    <div class="item item2">2x</div>
    <div class="item item3">3x</div>
    <div class="item item3">3x</div>
    <div class="item item3">3x</div>
    <!-- i元素的个数是列数-2 -->
    <!-- i 不用给高度 -->
    <i></i>



  </div>

  <script src="./js/itemRandomColor.js"></script>
</body>

</html>

itemRandomColor.js

function getRandomColor() {
  return `rgb(${Math.random()*255}, ${Math.random()*255}, ${Math.random()*255})`
}

const itemEls = document.querySelectorAll(".item")
for (const item of itemEls) {
  item.style.backgroundColor = getRandomColor()
}