CSS Flex - столбцы, которые переключаются на строки, если содержимое шире? - PullRequest
Новая
       34

CSS Flex - столбцы, которые переключаются на строки, если содержимое шире?

0 голосов
/ 30 января 2020

Я пытаюсь получить следующий макет: 

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

В столбце 2 может быть более длинное содержимое в зависимости от некоторых условий, и в этом случае его теперь нужно перенести во второй ряд и принять ширину 100%. , То есть теперь оба будут строками. 

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

Сейчас я застрял в столбцах одинаковой ширины, и при более широком содержании второй столбец растет вертикально.

1 Ответ

0 голосов
/ 30 января 2020

Просто макет flex-box с 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>
...