css - CSS Flex - 如果内容更宽，则切换到行的列？

Question

我正在尝试实现以下布局：

<Column 1, 50%> <Column 2, 50%>

根据某些条件，第 2 列的内容可能会更长，在这种情况下，它现在应该被推到第二行并占据 100% 的宽度。这意味着现在两者都将是行。

<Row 1 (was Column 1), 100%>
<Row 2 (was Column 2), 100%>

现在我被困在等宽的列上，第二列的内容更宽，垂直增长。

标签： csslayoutflexbox

Answer 1

只是一个带有flex-wrap?

.my-layout {
  display: flex;
  flex-wrap: wrap;
}

.my-layout > * {
  flex: 1 0 auto;
  /* optional: determine the minimum width of the cell before it breaks into the next line */
  min-width: 45%;
}

<div class="my-layout">
  <div style="background-color: salmon;">First Line</div>
  <div style="background-color: steelblue;">Second Line</div>
</div>

<br>

<div class="my-layout">
  <div style="background-color: salmon;">First Line First Line First Line First Line First Line First Line First Line First Line </div>
  <div style="background-color: steelblue;">Second Line</div>
</div>