Как выставить блоки flex в ряд

Question

Есть 6 контейнеров, один h3 в каждом, хочу выставить их в два ряда по 3 контейнера в каждом, но один контейнер не пускает другой в ряд с ним

.div{
    width: 500px;
    height: 300px;
    background: rgba(255, 140, 0,0.7);
    display: flex;
    margin:30px 60px;
    border-radius: 70px;
    transition: 0.7s;
    align-items: center;
    justify-content: center;
}

Answer 1

Свойство flex-direction: row можно не прописывать, оно по умолчанию row.

Для реализации задачи достаточно сделать 2 момента:

Родительскому тегу, в котором находятся 6 контейнеров, надо указать display: flex; и flex-wrap: wrap;.
Самому же контейнеру прописать свойство flex:0 0 25%;. Это позволит каждому контейнеру занять 25% от общей ширины родителя. Почему 25% а не 33%? Потому что есть еще margin:30px 60px;, который тоже заберет часть пространства. Если бы не было margin слева и справа, то можно было бы указать flex:0 0 33.33%;

Пример:

/*Reset styles*/
* {
  padding: 0;
  margin: 0;
  border: 0;
}

.parent_div {
  display: flex;
  flex-wrap: wrap;
}

.container {
  flex: 1 1 25%;
  width: 500px;
  height: 300px;
  background: rgba(255, 140, 0, 0.7);
  display: flex;
  margin: 30px 60px;
  border-radius: 70px;
  align-items: center;
  justify-content: center;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>
  <div class="parent_div">
    <div class="container">
      <h3>title1</h3>
    </div>
    <div class="container">
      <h3>title2</h3>
    </div>
    <div class="container">
      <h3>title3</h3>
    </div>
    <div class="container">
      <h3>title4</h3>
    </div>
    <div class="container">
      <h3>title5</h3>
    </div>
    <div class="container">
      <h3>title6</h3>
    </div>
  </div>
</body>

</html>

Но опять же, из-за жестких ограничений (width, height, margin) на маленьких разрешениях экрана 2 ряда по 3 контейнера превратятся в 3 ряда и 2 контенейнера. Если планируется делать адаптивно-отзывчивый сайт, то надо хорошо продумать эти моменты.

БЛОГ НА HUSL

Как выставить блоки flex в ряд

Ответы (1 шт):