Две колонки flex-box макет

Question

Две колонки flex-box макет

Мне нужно создать макет, который будет содержать список элементов в двух столбцах. Как я показал ниже:

.container {

  border: 1px solid red;

  height: 300px;

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

  flex-wrap: wrap;

}



.item {

  border: 1px dashed blue;

  height: 50px;

}

<div class="container">

  <div class="item">1</div>

  <div class="item">2</div>

  <div class="item">3</div>

  <div class="item">4</div>

  <div class="item">5</div>

  <div class="item">6</div>

  <div class="item">7</div>

  <div class="item">8</div>

</div>

Но есть проблема с такой компоновкой. Если останется только 1 деталь-она займет всю ширину. И мне нужно вести колонки, даже если есть несколько пунктов.

662 1

html css css3 flexbox

1 ответ:

Comments

Ничего не найдено.

Chris Elioglou · Accepted Answer · 2017-05-29 15:43:47

Можно задать максимальную ширину элемента, равную 50%. Это сохранит его почти такой же ширины, несмотря ни на что. Я говорю "почти", потому что у вас тоже есть границы.

Чтобы сохранить ширину точно такой же, вы также должны установить размер коробки: border-box для элемента.

Итак, ваш код будет:
.item {
  border: 1px dashed blue;
  height: 50px;
  box-sizing: border-box;
  max-width: 50%;
}
.container {
  border: 1px solid red;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.item {
  border: 1px dashed blue;
  height: 50px;
  box-sizing: border-box;
  max-width: 50%;
}
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>