Css Flexbox. Не могу выровнять группу элементов

Question

Пытаюсь выровнять на флексбоксах элементы, они должны идти сверху вниз, слева направо. Но когда меняется ось флексбоксов на column, то justify-content влияет на всю группу элементов, и получаеться последняя колонка стаёт по центру. А я пытаюсь выровнять там чтобы все колонки были отцентрированы по высоте, но последняя колонка строилась так же как на картинке внизу

Вот мой код

.container {
  background-color: darkslateblue;
  width: 100%;
  height: 100%;
}

.flex {
  background-color: darkmagenta;
  color: white;
  list-style: none;
  height: 250px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 10px 50px;
  align-items: stretch;
  align-content: start;
  justify-content: center;
}

.flex > li {
  border: 1px solid black;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 10px;
  justify-self: flex-start;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Hello world</h1>
    <div class="container">
      <div class="flex">
        <li>Product 1</li>
        <li>Product 2</li>
        <li>Product 3</li>
        <li>Product 4</li>
        <li>Product 5</li>
        <li>Product 6</li>
        <li>Product 7</li>
        <li>Product 8</li>
        <li>Product 9</li>
        <li>Product 10</li>
        <li>Product 11</li>
        <li>Product 12</li>
        <li>Product 13</li>
        <li>Product 14</li>
        <li>Product 15</li>
        <li>Product 16</li>
        <li>Product 17</li>
        <li>Product 18</li>
        <li>Product 19</li>
        <li>Product 20</li>
      </div>
    </div>
  </body>
</html>

Answer 1

Если высота контейнера фиксированная и Вы используете gap (пока будьте осторожней с этим свойством), то не вижу препятствий использовать flex-start:

.container {
  background-color: darkslateblue;
  width: 100%;
  height: 100%;
}

.flex {
  display: flex;
  flex-flow: column wrap;
  gap: 10px 50px;
  height: 250px;
  margin: 0;
  padding: 10px;
  list-style: none;
  background-color: darkmagenta;
  color: white;
  box-sizing: border-box;
}

.flex>li {
  display: flex;
  align-items: center;
  border: 1px solid black;
  box-sizing: border-box;
}

<h1>Hello world</h1>
<div class="container">
  <ul class="flex">
    <li>Product 1</li>
    <li>Product 2</li>
    <li>Product 3</li>
    <li>Product 4</li>
    <li>Product 5</li>
    <li>Product 6</li>
    <li>Product 7</li>
    <li>Product 8</li>
    <li>Product 9</li>
    <li>Product 10</li>
    <li>Product 11</li>
    <li>Product 12</li>
    <li>Product 13</li>
    <li>Product 14</li>
    <li>Product 15</li>
    <li>Product 16</li>
    <li>Product 17</li>
    <li>Product 18</li>
    <li>Product 19</li>
    <li>Product 20</li>
  </ul>
</div>

БЛОГ НА HUSL

Css Flexbox. Не могу выровнять группу элементов

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