Как разбить строку в гибком макете?

Question

У меня есть первый, второй и третий элементы, а затем я хочу, чтобы четвертый элемент перешел на следующую строку, независимо от того, насколько велико пространство.

.box {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: flex-start;
}
.it {
  max-width: 420px;
}

<div class="box">
  <div class="it">1</div>
  <div class="it">2</div>
  <div class="it">3</div>
  <div class="it">4</div>
</div>

html css flexbox

39

kptlronyttcna 27 Фев 2015 в 03:28

Answer 1

Вы можете вставить широкий псевдоэлемент в нужное место:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}
.flex-container::after {
  content: '';
  width: 100%;
}
.flex-item:last-child { /* or `:nth-child(n + 4)` */
  order: 1;
}

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

41

Oriol 27 Фев 2015 в 00:37

Answer 2

Я решил это:

.flex-container{
    display:flex;
    flex-direction:column;
    /* how you want your lines */
    text-align:center;
}

<div class="flex-container">
    <p>Line1</p>
    <p>Line2</p>
</div>

0

sunilpie 12 Окт 2020 в 12:34

Как разбить строку в гибком макете?

2 ответа

Похожие вопросы

Связанные вопросы

Новые вопросы

html