Inline flex — это значение свойства отображения CSS, которое сочетает в себе функции встроенного макета и макета flexbox. Если для элемента установлено значение «inline-flex», он становится элементом встроенного уровня и может быть размещен в гибком контейнере.

Вот пример использования встроенного гибкого кода:

HTML:

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

CSS:

.container {
  display: inline-flex;
}
.item {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 5px;
}

В этом примере для элемента div .containerустановлено значение display: inline-flex, что делает его гибким контейнером встроенного уровня. Дочерние элементы div с классом .itemзатем размещаются в виде флексбокса внутри встроенного контейнера.

Вот несколько дополнительных методов, которые можно использовать со встроенным flex:

Вы можете использовать свойство justify-contentдля выравнивания гибких элементов вдоль главной оси (по умолчанию — горизонтальной оси). Например:

центр; /* Выравниваем элементы по центру */

2. Выровнять элементы:
   Свойство align-itemsможно использовать для выравнивания гибких элементов вдоль поперечной оси (по умолчанию — вертикальной оси). Например:

.container {
  display: inline-flex;
  align-items: flex-start; /* Align items at the top */
}

3. Направление гибкости:
   Свойство flex-directionуправляет направлением гибких элементов. Его можно установить на row(по умолчанию), row-reverse, columnили column-reverse. Например:

.container {
  display: inline-flex;
  flex-direction: column; /* Arrange items vertically */
}

4. Гибкая упаковка:
   Свойство flex-wrapопределяет, должны ли гибкие элементы переноситься или нет, если они превышают ширину контейнера. Для него можно установить значение nowrap(по умолчанию), wrapили wrap-reverse. Например:

.container {
  display: inline-flex;
  flex-wrap: wrap; /* Allow items to wrap to the next line */
}