Flexbox中的space-between不适用？不妨试试这招

2024-01-21 19:01:20

Flexbox布局是一种非常流行的布局方式，它可以轻松实现多种复杂的布局效果。但是，FlexBox布局虽然强大，但并不能完全呈现以上布局。因此，我们需要结合FlexBox做出一些小的改动，即可轻松实现想要的效果。

首先，我们需要创建一个Flexbox容器。我们可以使用div元素来创建Flexbox容器，并将display属性设置为flex。

<div class="container">
  <!-- Flexbox内容 -->
</div>

然后，我们需要在Flexbox容器中添加一些子元素。子元素可以是任何类型的HTML元素，例如div、p、span等。

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

接下来，我们需要设置子元素的flex属性。flex属性可以设置子元素在Flexbox容器中的排列方式。我们可以将子元素的flex属性设置为1，这样子元素就会在Flexbox容器中平分空间。

<div class="container">
  <div class="item" style="flex: 1;">1</div>
  <div class="item" style="flex: 1;">2</div>
  <div class="item" style="flex: 1;">3</div>
</div>

现在，我们已经创建了一个Flexbox布局。但是，如果我们想要在子元素之间添加间距，就需要使用space-between属性。space-between属性可以设置子元素之间的间距。我们可以将子元素的space-between属性设置为10px，这样子元素之间的间距就会为10px。

<div class="container">
  <div class="item" style="flex: 1;">1</div>
  <div class="item" style="flex: 1;">2</div>
  <div class="item" style="flex: 1;">3</div>
</div>

.container {
  display: flex;
  justify-content: space-between;
}

现在，我们已经创建了一个Flexbox布局，并在子元素之间添加了间距。但是，如果我们想要在子元素之间添加等宽但占高为0的隐藏元素，就需要使用伪元素。伪元素可以创建一些不存在的元素，我们可以使用伪元素来创建等宽但占高为0的隐藏元素。

<div class="container">
  <div class="item" style="flex: 1;">1</div>
  <div class="item" style="flex: 1;">2</div>
  <div class="item" style="flex: 1;">3</div>
  <div class="spacer"></div>
</div>

.container {
  display: flex;
  justify-content: space-between;
}

.spacer {
  width: 10px;
  height: 0;
  flex: 1;
}