Flexbox布局基础开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第一天，点击查看活动详情 F

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

Flexbox布局基础

FLexbox布局是一种布局机制，用于在一个维度上为项目组设置布局

Flexbox 模块中的主要功能就是 Web 布局。Flexbox 布局可以明确地指明容器空间的分布方式、内容对齐和元素的视觉顺序。使用 Flexbox 布局，可以轻易地实现横向或纵向布局，还可以沿着一个轴布局，或折断成多行。可以说，使用 Flexbox 布局可以轻易地构建你想要的任何布局。

flex项目换行

在默认的情况下，Flex容器中的所有flex项目会沿着主轴方向依次排列，不会换行或换列，即使是溢出容器也是这样，那是因为flex-warp默认值为nowrap.

需要注意的就是如果flex容器没有足够多的空间，flex项目在溢出之前，每一个flex项目会尽可能的缩小到最小尺寸（min-content）,当达到最小尺寸时，flex项目将开始溢出容器了

<!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>FlexBox布局</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      width: 100vw;
      min-height: 100vh;
      font-family: 'Exo', Arial, sans-serif;
      background-color: #557;
      color: #fff;
      display: grid;
      gap: 1rem;
      place-content: center;
      padding: 1rem;
    }

    .box {
      inline-size: 30vw;
      padding: 1rem;
      gap: 1rem;
      background: #ffffff;
      border: 3px solid #88978a;
      border-radius: 10px;
      display: flex;
    }

    .item {
      background: #e8f0fe;
      border: 2px solid #2938e9;
      border-radius: 4px;
      color: #000;
      padding: 1rem;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      inline-size: 180px;
      aspect-ratio: 1;
    }

    .item:nth-child(2) {
      background-color: #efe1ff;
    }

    .item:nth-child(3) {
      background-color: #bbd7af;
    }

    .item:nth-child(4) {
      background-color: #ecbbbb;
    }

    .item:nth-child(5) {
      background-color: #00f0ff;
    }

    .item:nth-child(6) {
      background-color: #d7af0a;
    }
  </style>
  <body>
    <div class="box">
      <div class="item">one</div>
      <div class="item">two</div>
      <div class="item">three</div>
      <div class="item">four</div>
      <div class="item">five</div>
      <div class="item">six</div>
    </div>
  </body>
</html>

如果希望避免这个溢出，主需要在flex容器上显式设置flex-wrap:wrap;即可

.box {
  flex-wrap:wrap;
}

Flex 容器在换行后会创建多个 Flex 行 。每一行就像一个新的 Flex 容器。所以，如果你要换行的话，就无法让第二行某些内容与第一行的内容对齐。这就是所谓的 Flex 容器是一维框（盒子）。你只可以在独立的轴上（主轴或侧轴）也就是一行或一列上对齐 Flex 项目，但不能像 CSS Grid 那样同时在两个轴上控制 Grid 项目。

因此在使用Flexbox布局时，为了使页面布局更具灵活性，最好在显式声明的flex容器上加上flex-wrap:wrap;

如果当前页面不需要换行的话，那么Flex容器的flex-wrap属性采用默认值nowrap更好

flex-wrap还有一个属性，wrap-reverse也会让flex项目换行，只是它和wrap的排列方向相反，他同样也受flex-direction属性的影响

还有一点就是当使用flex-wrap碰到设置flex:1;时，只有flex容器没有足够空间容纳flex项目时，才会让flex项目换行。

这里有一个简写属性flex-flow,包含多个子属性，如果要同时写flex-direction和flex-wrap时，可以使用简写flex-flow属性

.container {
  display: flex;
    flex-flow: column wrap;
}

等同于

.container {
  display: flex;
   flex-direction: column;
    flex-wrap: wrap;
}

我们在使用flex-flow属性时，可以只显式设置一个值，如果设置的值与哪一个属性配对，那另一个属性的值就为initial.

Flex项目排序

Web页面是由多个html元素组建成的，HTML 文档中的元素是按照其在文档中出现的先后顺序决定的。

在Flexbox布局中，我们可以使用flex-direction属性的值row-reverse和column-reverse来改变主轴和侧轴的flex项目排列顺序，但不能改变单个flex项目的排列顺序，所以在这里如果要单独对某个或某几个flex项目重新排序的话，就可以用到flex项目上的order属性

order属性可以对flex项目重新排序，它会按照flex-direction的指定方向，最小值在最前面，如果多个项目具有相同的值，它将与其他项目一起显示

order初始值为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>FlexBox布局</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      width: 100vw;
      min-height: 100vh;
      font-family: 'Exo', Arial, sans-serif;
      background-color: #557;
      color: #fff;
      display: grid;
      gap: 1rem;
      place-content: center;
      padding: 1rem;
    }

    .box {
      inline-size: 30vw;
      padding: 1rem;
      gap: 1rem;
      background: #ffffff;
      border: 3px solid #88978a;
      border-radius: 10px;
      display: flex;
      flex-wrap: wrap;
    }

    .item:nth-child(2) {
      order: -1;
    }

    .item:nth-child(3) {
      background-color: #bbd7af;
      order: var(--order);
    }

    .item:nth-child(4) {
      background-color: #ecbbbb;
    }

    .item:nth-child(5) {
      background-color: #00f0ff;
      order: 2;
    }

    .item:nth-child(6) {
      background-color: #d7af0a;
    }
  </style>
  <body>
    <div class="box">
      <div class="item">one</div>
      <div class="item">two</div>
      <div class="item">three</div>
      <div class="item">four</div>
      <div class="item">five</div>
      <div class="item">six</div>
    </div>
  </body>
</html>

需要注意的是在flex项目上使用order属性和在flex-direction的row-reverse（column-reverse）有相同的效果，它对Web可访问性是不友好的，所以因尽量不使用order。

Flex项目之间的间距

通常我们设置页面中元素之间的间距是使用margin属性来写的，而在Flexbox布局中，我们可以使用gap属性来设置元素之间的距离，但实质上，gap是用来定义行与行，列与列之间的距离

gap可以接受一个值，也可以接受两个值，当只显式设置一个值时，那么两个值相等，设置两个值时，第一个是row-gap的值，第二个是column-gap的值

.flex-container {
    gap: 10px;
    
    /* 等同于 */
    row-gap: 10px;
    column-gap: 10px;
}
•
.flex-container {
    gap: 10px 20px;
    
    /* 等同于 */
    row-gap: 10px;
    column-gap: 20px;
}

虽然margin和gap都可以设置元素之间的间距，但它们也有明显的差距

gap是运用在flex容器中，无法给flex项目设置不同的外间距

margin则是运用在flex项目中，可以给flex项目设置不同的外间距

并且使用margin会让flex项目与flex容器之间有空白间距。