如何使 Flexbox 项目与其他项目具有相同宽度，但在新行上

Question

我想将 Flexbox 项目设置为与两个 Flexbox 项目组合的宽度相同的宽度。例如：

.body {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
}

.line-break {
  flex-basis: 100%;
}

.item-1 {
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

.item-2 {
  width: auto;
  height: auto;
  border: 1px solid black;
}

.item-3 {
  border: 1px solid black;
}

<div class="body">
  <div class="item-1">
  </div>
  <div class="item-2">
    <p>This is a text</P>
  </div>
  <div class="line-break" />
  <div class="item-3">
    <p>This is another text</p>
  </div>
</div>

旁注：我在我的项目中使用 React 框架。

我如何计算

item-3

的宽度，使其动态与

item-1

+ 间隙 +

item_2

具有相同的宽度？

https://codepen.io/InFusion-the-sans/pen/wvQRRxK

我尝试将

flex-basis

上的

item-3

属性设置为某个百分比，但结果与我想要的预期宽度相差太远。

Answer 1

您需要使用

flex-grow: 1

到

item-2

，以便它覆盖该行的剩余可用宽度。

width: auto

不会那样做:)

.item-2 {
    flex-grow: 1;
}

.body {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem;
}

.line-break {
    flex-basis: 100%;
}

.item-1 {
    width: 300px;
    height: 300px;
    border: 1px solid black;
}

.item-2 {
    /* width: auto; */
    height: auto;
    border: 1px solid black;
    flex-grow: 1;
}

.item-3 {
    border: 1px solid black;
}

<div class="body">
    <div class="item-1">
    </div>
    <div class="item-2">
        <p>This is a text</P>
    </div>
    <div class="line-break">

    <div class="item-3">
        <p>This is another text</p>
    </div>
</div>

Answer 2

您可以添加额外的包装，如下所示：

.body {
  display: inline-flex;
  flex-direction: column;
  gap: 2rem; /*this is the line break,   <div class="line-break" /> does nothing, since it doesn't have height*/
}

.top-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
}
.item-1 {
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

.item-2 {
  width: auto;
  height: auto;
  border: 1px solid black;
}

.item-3 {
  align-self: stretch;
  border: 1px solid black;
}

<div class="body">
  <div class="top-wrapper">
    <div class="item-1">
    </div>
    <div class="item-2">
      <p>This is a text</P>
    </div>
  </div>
  <div class="item-3">
    <p>This is another text</p>
  </div>
</div>