flex布局的flex-wrap属性：设置子元素是否换行

最新推荐文章于 2025-06-25 18:32:01 发布

原创最新推荐文章于 2025-06-25 18:32:01 发布 · 975 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

flex-wrap 设置子元素是否换行

flex布局中，默认子元素都排在一条轴线上，不换行。如果装不下，会缩小子元素的宽度。

flex-wrap属性值：

nowrap：不换行，这是默认值
wrap：换行
wrap-reverse：和 wrap 的行为一样，但是 cross-start 和 cross-end 互换，即子元素会在容器的多行中排列，但是会从最后一行开始排列，然后向上排列到第一行。

示例

flex布局默认不换行，如果装不下，会缩小子元素的宽度

下面示例中，大盒子宽度设置为800像素，子元素宽度设置为200像素，子元素还设置了margin值为10像素，照理一行只能装下3个子元素。但实际有5个子元素，flex布局默认会压缩子元素的宽度，在一行把所有子元素显示出来。

<!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 {
      display: flex;
      flex-direction: row;
      justify-content: start;
      width: 800px;
      height: 400px;
      background-color: pink;
    }

    div span {
      width: 200px;
      height: 100px;
      background-color: purple;
      color: white;
      margin: 10px;
    }
  </style>
</head>

<body>
  <div>
    <span>内容1</span>
    <span>内容2</span>
    <span>内容3</span>
    <span>内容4</span>
    <span>内容5</span>
  </div>
</body>

</html>

展示效果：
在这里插入图片描述

设置flex-wrap属性的值为wrap

<!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 {
      display: flex;
      flex-direction: row;
      justify-content: start;
      flex-wrap: wrap;
      width: 800px;
      height: 400px;
      background-color: pink;
    }

    div span {
      width: 200px;
      height: 100px;
      background-color: purple;
      color: white;
      margin: 10px;
    }
  </style>
</head>

<body>
  <div>
    <span>内容1</span>
    <span>内容2</span>
    <span>内容3</span>
    <span>内容4</span>
    <span>内容5</span>
  </div>
</body>

</html>

展示效果：
在这里插入图片描述

设置flex-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>Document</title>
  <style>
    div {
      display: flex;
      flex-direction: row;
      justify-content: start;
      flex-wrap: wrap-reverse;
      width: 800px;
      height: 400px;
      background-color: pink;
    }

    div span {
      width: 200px;
      height: 100px;
      background-color: purple;
      color: white;
      margin: 10px;
    }
  </style>
</head>

<body>
  <div>
    <span>内容1</span>
    <span>内容2</span>
    <span>内容3</span>
    <span>内容4</span>
    <span>内容5</span>
  </div>
</body>

</html>

展示效果：
在这里插入图片描述