Совместите элементы встроенного блока с левым и правым краем контейнера

Question

Это немного сложно объяснить, что я пытаюсь сделать, но я буду стараться изо всех сил.

• У меня есть X количество категорий.
• Я хочу поместить каждую категорию в рамку с серой рамкой.
• Я хочу отображать поля категорий как «встроенный блок» слева направо.
• Может быть 1,2,3,4,5 .... ПО странице в зависимости от размера экрана пользователя.
• Я хочу, чтобы ящики, расположенные слева, находились справа от левой стороны контейнера. Я хочу, чтобы ящики, которые находятся справа, находились справа от правой стороны контейнера.

Вот так:

.container {
  width: 100%;
}

.category {
  width: 100px;
  display: inline-block;
  border: 1px solid grey;
}

<div class="container">
  <div class="category">Category 1</div>
  <div class="category">Category 2</div>
  <div class="category">Category 3</div>
  <div class="category">Category 4</div>
  <div class="category">Category 5</div>
  <div class="category">Category 6</div>
</div>

Если я должен был измениться:

.container {
  column-count:4; 
}

Это дает эффект, который я ищу. НО - они уже не в порядке по всему экрану. Категории отображаются сверху -> снизу, а не слева -> справа.

Answer 1

Flexbox на помощь. В следующем примере элементы имеют фиксированную ширину и пространство между ними распределяется равномерно:

.container {
  margin: 1em 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.category {
  border: 1px solid gray;
  width: 100px;
}

<div class="container">
  <div class="category">Category 1</div>
  <div class="category">Category 2</div>
  <div class="category">Category 3</div>
  <div class="category">Category 4</div>
  <div class="category">Category 5</div>
  <div class="category">Category 6</div>
</div>

<div class="container">
  <div class="category">Category 1</div>
  <div class="category">Category 2</div>
  <div class="category">Category 3</div>
</div>

<div class="container">
  <div class="category">Category 1</div>
  <div class="category">Category 2</div>
</div>

В следующем примере элементы имеют ширину жидкости и расстояние между ними фиксировано:

.container {
  margin: 1em 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.category {
  margin: 0 1em;
  border: 1px solid gray;
  width: calc(25% - 2em - 2px);
}

<div class="container">
  <div class="category">Category 1</div>
  <div class="category">Category 2</div>
  <div class="category">Category 3</div>
  <div class="category">Category 4</div>
  <div class="category">Category 5</div>
  <div class="category">Category 6</div>
</div>

<div class="container">
  <div class="category">Category 1</div>
  <div class="category">Category 2</div>
  <div class="category">Category 3</div>
</div>

<div class="container">
  <div class="category">Category 1</div>
  <div class="category">Category 2</div>
</div>