Выравнивание элементов в flex-container

Question

Есть flex-container с элементами внутри, при последовательной вставки каждого элемента они выстраиваются вслед за другом по главной оси, но при переносе нового элемента на следующую строку элемент становится в центр(как на картинке). Как можно сделать, чтобы элемент под номером 7 был ровно под элементом 1 ?

Css код, что использую.

<style type="text/css">
.flex-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row column; 
    justify-content: center;
}
</style>

Answer 1

Для этого нужно сменить

justify-content: center;

на

justify-content: flex-start;

.flex-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row column; 
    justify-content: flex-start;
}
.element{
  width: 100px;
  height: 100px;
  background: red;
  border: 1px solid green;
}

<div class="flex-container">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

БЛОГ НА HUSL

Выравнивание элементов в flex-container

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