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
для выравнивания гибких элементов вдоль главной оси (по умолчанию — горизонтальной оси). Например:
центр; /* Выравниваем элементы по центру */
- Выровнять элементы:
Свойствоalign-items
можно использовать для выравнивания гибких элементов вдоль поперечной оси (по умолчанию — вертикальной оси). Например:
.container {
display: inline-flex;
align-items: flex-start; /* Align items at the top */
}
- Направление гибкости:
Свойствоflex-direction
управляет направлением гибких элементов. Его можно установить наrow
(по умолчанию),row-reverse
,column
илиcolumn-reverse
. Например:
.container {
display: inline-flex;
flex-direction: column; /* Arrange items vertically */
}
- Гибкая упаковка:
Свойствоflex-wrap
определяет, должны ли гибкие элементы переноситься или нет, если они превышают ширину контейнера. Для него можно установить значениеnowrap
(по умолчанию),wrap
илиwrap-reverse
. Например:
.container {
display: inline-flex;
flex-wrap: wrap; /* Allow items to wrap to the next line */
}