Div не оборачивается горизонтально - PullRequest
0 голосов
/ 03 февраля 2020

У меня есть 5 divs, который я бы хотел выровнять, используя 3 строки и столбца, например:

| ОО |
| ОО |
| O |

Я новичок в flexbox, похоже, я не могу обернуть свои дивы. Похоже, они центрированы внутри моего родительского контейнера div в следующем порядке:
| O |
| O |
| O |
| O |
| O |

Я хочу, чтобы innerContainer переносился на следующую строку после размещения двух div.

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding-top: 20px;
}

.containerBody {
  padding-top: 20px;
  width: 75%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.innerContainer {
  width: 30%;
  min-width: 30%;
  height: 185px;
  flex: 1;
  box-sizing: border-box;
}
<div class="container">
  <!-- text -->
  <div class="containerBody">
    <!-- text -->
    <a>
      <div class="innerContainer">
        O
      </div>
    </a>
    <a>
      <div class="innerContainer">
        O
      </div>
    </a>
<a>
      <div class="innerContainer">
        O
      </div>
    </a>
<a>
      <div class="innerContainer">
        O
      </div>
    </a>
<a>
      <div class="innerContainer">
        O
      </div>
    </a>

1 Ответ

1 голос
/ 03 февраля 2020

С flexbox дело в том, что элементы, которыми вы хотите управлять, должны быть прямыми потомками вашего гибкого контейнера. Как это:

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

.item {
  flex: 0 1 50%;
}
<div class="container">
  <div class="item">0</div>
  <div class="item">0</div>
  <div class="item">0</div>
  <div class="item">0</div>
  <div class="item">0</div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...