css flexbox Позиционирование

197

03 июля 2018, 07:00

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

Answer 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>

Answer 2

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

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

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

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

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

не срабатывает rotate()

236

javascript

Webpack-dev-server

Никак не могу разобраться как настроить webpack-dev-server на автообновление страницы в хроме при изменении html документаПри изменении sass/js файлов...

171

javascript

Google Maps. Передача параметров через карту

На сайте есть карта

193

javascript

Стрелочные функции JavaScript

Задание: C помощью стрелочных функций получить из массива положительные числа и вычислить квадрат этих чисел

199