Bootstrap5 Flex换行

听海边涛声

已于 2024-08-31 10:12:31 修改

阅读量4k

点赞数 10

文章标签： bootstrap 前端

于 2024-08-31 10:11:34 首次发布

本文链接：https://blog.csdn.net/panghuangang/article/details/141746286

版权

https://v5.bootcss.com/docs/utilities/flex/#wrap

默认情况下，条目都排在一条线（又称“轴线”）上。

.flex-nowrap：是默认值，不换行
.flex-wrap：换行，第一行在上方
.flex-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>
  <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
</head>

<body>
  <div class="container">
    <div class="d-flex bg-primary flex-row">
      <div class="bg-danger" style="width: 200px;">弹性盒子1</div>
      <div class="bg-info" style="width: 200px;">弹性盒子2</div>
      <div class="bg-warning" style="width: 200px;">弹性盒子3</div>
      <div class="bg-danger" style="width: 200px;">弹性盒子4</div>
      <div class="bg-info" style="width: 200px;">弹性盒子5</div>
      <div class="bg-warning" style="width: 200px;">弹性盒子6</div>
      <div class="bg-danger" style="width: 200px;">弹性盒子7</div>
      <div class="bg-info" style="width: 200px;">弹性盒子8</div>
      <div class="bg-warning" style="width: 200px;">弹性盒子9</div>
      <div class="bg-danger" style="width: 200px;">弹性盒子10</div>
      <div class="bg-info" style="width: 200px;">弹性盒子11</div>
      <div class="bg-warning" style="width: 200px;">弹性盒子12</div>
      <div class="bg-danger" style="width: 200px;">弹性盒子13</div>
      <div class="bg-info" style="width: 200px;">弹性盒子14</div>
      <div class="bg-warning" style="width: 200px;">弹性盒子15</div>
    </div>
  </div>

  <script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

在这里插入图片描述

`.flex-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>
  <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
</head>

<body>
  <div class="container">
    <div class="d-flex bg-primary flex-row flex-wrap">
      <div class="bg-danger" style="width: 200px;">弹性盒子1</div>
      <div class="bg-info" style="width: 200px;">弹性盒子2</div>
      <div class="bg-warning" style="width: 200px;">弹性盒子3</div>
      <div class="bg-danger" style="width: 200px;">弹性盒子4</div>
      <div class="bg-info" style="width: 200px;">弹性盒子5</div>
      <div class="bg-warning" style="width: 200px;">弹性盒子6</div>
      <div class="bg-danger" style="width: 200px;">弹性盒子7</div>
      <div class="bg-info" style="width: 200px;">弹性盒子8</div>
      <div class="bg-warning" style="width: 200px;">弹性盒子9</div>
      <div class="bg-danger" style="width: 200px;">弹性盒子10</div>
      <div class="bg-info" style="width: 200px;">弹性盒子11</div>
      <div class="bg-warning" style="width: 200px;">弹性盒子12</div>
      <div class="bg-danger" style="width: 200px;">弹性盒子13</div>
      <div class="bg-info" style="width: 200px;">弹性盒子14</div>
      <div class="bg-warning" style="width: 200px;">弹性盒子15</div>
    </div>
  </div>

  <script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

在这里插入图片描述

`.flex-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>
  <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
</head>

<body>
  <div class="container">
    <div class="d-flex bg-primary flex-row flex-wrap-reverse">
      <div class="bg-danger" style="width: 200px;">弹性盒子1</div>
      <div class="bg-info" style="width: 200px;">弹性盒子2</div>
      <div class="bg-warning" style="width: 200px;">弹性盒子3</div>
      <div class="bg-danger" style="width: 200px;">弹性盒子4</div>
      <div class="bg-info" style="width: 200px;">弹性盒子5</div>
      <div class="bg-warning" style="width: 200px;">弹性盒子6</div>
      <div class="bg-danger" style="width: 200px;">弹性盒子7</div>
      <div class="bg-info" style="width: 200px;">弹性盒子8</div>
      <div class="bg-warning" style="width: 200px;">弹性盒子9</div>
      <div class="bg-danger" style="width: 200px;">弹性盒子10</div>
      <div class="bg-info" style="width: 200px;">弹性盒子11</div>
      <div class="bg-warning" style="width: 200px;">弹性盒子12</div>
      <div class="bg-danger" style="width: 200px;">弹性盒子13</div>
      <div class="bg-info" style="width: 200px;">弹性盒子14</div>
      <div class="bg-warning" style="width: 200px;">弹性盒子15</div>
    </div>
  </div>

  <script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>

</html>