Flexbox布局下，子元素width:100%如何实现space-between效果？

在Flexbox布局中，justify-content: space-between 会将子元素均匀分布在容器中，第一个子元素在容器的起始位置，最后一个子元素在容器的结束位置，其余子元素之间的间距相等。

如果你希望子元素的宽度为100%，并且实现 space-between 的效果，可以通过以下方式实现：

1. 使用 flex-grow 属性

你可以将子元素的 flex-grow 属性设置为1，这样它们会自动扩展以填充容器的剩余空间，从而实现类似 space-between 的效果。

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

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

.item {
  flex-grow: 1;
  width: 100%;
}

2. 使用伪元素

如果你希望子元素的宽度为100%，并且仍然保持 space-between 的效果，可以使用伪元素来模拟 space-between 的效果。

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

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

.container::before,
.container::after {
  content: '';
  display: block;
  flex: 1;
}

.item {
  width: 100%;
}

3. 使用 margin 属性

你也可以通过设置子元素的 margin 属性来实现类似 space-between 的效果。

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

.container {
  display: flex;
}

.item {
  width: 100%;
  margin-right: 10px; /* 设置间距 */
}

.item:last-child {
  margin-right: 0;
}

4. 使用 calc() 函数

如果你知道子元素的数量，可以使用 calc() 函数来计算每个子元素的宽度。

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

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

.item {
  width: calc(100% / 3 - 10px); /* 假设有3个子元素，间距为10px */
}

总结

• 如果你希望子元素自动扩展以填充剩余空间，可以使用 flex-grow: 1。
• 如果你希望子元素的宽度为100%，并且仍然保持 space-between 的效果，可以使用伪元素或 margin 属性。
• 如果你知道子元素的数量，可以使用 calc() 函数来计算每个子元素的宽度。

根据你的具体需求选择合适的方法。