0

Есть 7 блоков внутри родительского, надо сделать через flexbox, что бы эти блоки шли друг под другом в 2 колонки.введите сюда описание изображения

1
  • Друг за другом - это в столбик или в строку? Пронумеровал бы. И они специально разного размера, или ты их криво нарисовал?
    – Qwertiy
    6 июн 2018 в 14:53

2 ответа 2

1

Вам нужно добавить перенос элементов на новую строку, для контейнера в котором будут ваши дивы, это делается css свойством flex-wrap: wrap; конечно же для начала добавив свойство display: flex; =). Для самих дивов нужно дать ширину и отступы по бокам, чтобы дивы не слипались

main {
  display: flex;
}
.left-bar {
  width: 100px;
  height: 500px;
  border: 2px solid red;
}
.main-content {
  width: 500px;
  height: 500px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border: 2px solid blue;
  margin: 0 10px;
  padding: 30px;
  box-sizing: border-box;
}
.main-content .item {
  width: 45%;
  height: 50px;
  border: 2px solid red;
}
.right-bar {
  width: 100px;
  height: 500px;
  border: 2px solid red;
}
<main>
<section class="left-bar">
</section>
<section class="main-content">
  <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>
</section>
<section class="right-bar">
</section>
</main>

0

для родителя:

parentBlock {
   flex-wrap: wrap;
   justify-content: flex-start; // либо space-between;
   padding: количество_px;
}

для дочерних:

children {
    width: 45%; // или какая Вам ширина нужна
    margin: px px;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.