从左往右不断堆叠的弹性盒布局，给予容器足够空间，尽显容器魅力

2023-10-01 05:31:50

弹性盒布局是一种强大的工具，它允许您在浏览器中创建灵活、响应迅速的布局。它非常适合创建适应不同设备和屏幕尺寸的网站。使用弹性盒布局，您可以轻松创建从左到右不断堆叠的盒子布局，并在空间不足时自动换行。

实现步骤

创建弹性容器

首先，您需要创建一个弹性容器。这可以通过向您的HTML添加一个<div>元素并为其设置display: flex属性来完成。

<div class="container">
  ...
</div>

设置flex-direction属性

接下来，您需要为弹性容器设置flex-direction属性。此属性决定了盒子的排列方向。对于从左到右的布局，您需要将flex-direction属性设置为row。

.container {
  display: flex;
  flex-direction: row;
}

设置justify-content属性

justify-content属性决定了盒子在容器中的排列方式。对于从左到右的布局，您需要将justify-content属性设置为flex-start。

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

设置flex-wrap属性

flex-wrap属性决定了容器是否允许换行。对于从左到右的布局，您需要将flex-wrap属性设置为wrap。

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
}

添加盒子

现在您已经创建了一个弹性容器，您可以开始添加盒子了。您可以通过向容器中添加<div>元素并为其设置flex属性来完成。

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

设置盒子的大小

您可以使用width和height属性来设置盒子的尺寸。

.box {
  width: 100px;
  height: 100px;
}

实例效果

现在您已经创建了一个从左到右不断堆叠的盒子布局。当空间不足时，盒子会自动换行，以获得整洁的布局。

<!DOCTYPE html>
<html>
<head>
  
  <style>
    .container {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: wrap;
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: #ccc;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</body>
</html>