Как выровнять блоки на всю ширину, чтобы при адаптивности блоки на последней строке выравнивались по левому краю?

Question

Помогите настроить флекс - есть строки с блоками, которые условно должны быть выровнены через justify-content: space-between; (при полностью заполненной строке) и незаполненная строка через justify-content: flex-start;

.content {
  width: 900px;
  margin: 0 auto;
  background-color: #eaeaea;
  padding: 20px;
}
.content-list {
  margin: 0;
  padding: 20px 10px 10px 20px;
  background-color: #aaaaaa;
  list-style: none;
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
}
.content-list__item {
  background-color: aquamarine;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  margin: 0 10px 10px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="content">
    <ul class="content-list">
      <li class="content-list__item"><a href="#">1</a></li>
      <li class="content-list__item"><a href="#">2</a></li>
      <li class="content-list__item"><a href="#">3</a></li>
      <li class="content-list__item"><a href="#">4</a></li>
      <li class="content-list__item"><a href="#">5</a></li>
      <li class="content-list__item"><a href="#">6</a></li>
      <li class="content-list__item"><a href="#">7</a></li>
      <li class="content-list__item"><a href="#">8</a></li>
      <li class="content-list__item"><a href="#">9</a></li>
      <li class="content-list__item"><a href="#">10</a></li>
      <li class="content-list__item"><a href="#">11</a></li>
      <li class="content-list__item"><a href="#">12</a></li>
      <li class="content-list__item"><a href="#">13</a></li>
      <li class="content-list__item"><a href="#">14</a></li>
      <li class="content-list__item"><a href="#">15</a></li>
      <li class="content-list__item"><a href="#">16</a></li>
      <li class="content-list__item"><a href="#">17</a></li>
      <li class="content-list__item"><a href="#">18</a></li>
      <li class="content-list__item"><a href="#">19</a></li>
      <li class="content-list__item"><a href="#">20</a></li>
      <li class="content-list__item"><a href="#">21</a></li>
      <li class="content-list__item"><a href="#">22</a></li>
      <li class="content-list__item"><a href="#">23</a></li>
    </ul>
  </div>

Answer 1

.content {
  max-width: 900px;
  margin: 0 auto;
  background-color: #eaeaea;
  padding: 20px;
}
.content-list {
  margin: 0;
  padding: 20px 10px 10px 20px;
  background-color: #aaaaaa;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.content-list__item {
  background-color: aquamarine;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  margin: 0 10px 10px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 750px) {
  .content-list {
    justify-content: flex-start;
  }
}

<div class="content">
  <ul class="content-list">
    <li class="content-list__item"><a href="#">1</a></li>
    <li class="content-list__item"><a href="#">2</a></li>
    <li class="content-list__item"><a href="#">3</a></li>
    <li class="content-list__item"><a href="#">4</a></li>
    <li class="content-list__item"><a href="#">5</a></li>
    <li class="content-list__item"><a href="#">6</a></li>
    <li class="content-list__item"><a href="#">7</a></li>
    <li class="content-list__item"><a href="#">8</a></li>
    <li class="content-list__item"><a href="#">9</a></li>
    <li class="content-list__item"><a href="#">10</a></li>
    <li class="content-list__item"><a href="#">11</a></li>
    <li class="content-list__item"><a href="#">12</a></li>
    <li class="content-list__item"><a href="#">13</a></li>
    <li class="content-list__item"><a href="#">14</a></li>
    <li class="content-list__item"><a href="#">15</a></li>
    <li class="content-list__item"><a href="#">16</a></li>
    <li class="content-list__item"><a href="#">17</a></li>
    <li class="content-list__item"><a href="#">18</a></li>
    <li class="content-list__item"><a href="#">19</a></li>
    <li class="content-list__item"><a href="#">20</a></li>
    <li class="content-list__item"><a href="#">21</a></li>
    <li class="content-list__item"><a href="#">22</a></li>
    <li class="content-list__item"><a href="#">23</a></li>
  </ul>
</div>

БЛОГ НА HUSL

Как выровнять блоки на всю ширину, чтобы при адаптивности блоки на последней строке выравнивались по левому краю?

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