CSS Flexbox — это инструмент, который помогает расположить элементы на веб-странице. Представь, что у тебя есть коробка с игрушками, и ты хочешь расставить их красиво. Flexbox — это волшебная коробка, которая помогает сделать это легко и удобно.
Основные понятия
- Flex-контейнер: Это как большая коробка, в которой лежат игрушки.
- Flex-элементы: Это игрушки в коробке.
Свойства Flex-контейнера
-
display
Представь, что ты говоришь коробке, что она должна стать волшебной. Для этого используем
display: flex;
..container { display: flex; /* Теперь коробка волшебная! */ }
-
flex-direction: задает направление, в котором расположены игрушки.
.container { flex-direction: row; /* Игрушки выстроены в ряд слева направо */ }
- row: игрушки выстроены в ряд слева направо.
- row-reverse: игрушки выстроены в ряд справа налево.
- column: игрушки выстроены в колонку сверху вниз.
- column-reverse: игрушки выстроены в колонку снизу вверх.
-
justify-content: выравнивание игрушек по горизонтали.
.container { justify-content: flex-start; /* Игрушки прижаты к левому краю коробки */ }
- flex-start: все игрушки слева.
- flex-end: все игрушки справа.
- center: все игрушки по центру.
- space-between: игрушки распределены равномерно, крайние прижаты к краям.
- space-around: игрушки распределены с равными промежутками вокруг.
-
align-items: выравнивание игрушек по вертикали.
.container { align-items: center; /* Все игрушки по центру по вертикали */ }
- stretch: игрушки растянуты на всю высоту коробки.
- flex-start: игрушки прижаты к верхнему краю.
- flex-end: игрушки прижаты к нижнему краю.
- center: игрушки по центру по вертикали.
Свойства Flex-элементов
-
order: определяет порядок расположения игрушек.
.item { order: 2; /* Эта игрушка будет второй, даже если она добавлена первой */ }
-
flex-grow: насколько сильно игрушка может расти.
.item { flex-grow: 1; /* Эта игрушка может расти, чтобы заполнить свободное место */ }
-
flex-shrink: насколько сильно игрушка может сжиматься.
.item { flex-shrink: 1; /* Эта игрушка может сжиматься, чтобы поместиться в коробку */ }
-
flex-basis: задает начальный размер игрушки.
.item { flex-basis: 100px; /* Эта игрушка изначально будет 100 пикселей шириной */ }
Примеры
Пример 1: Основы Flexbox
<div class="container">
<div class="item">Игрушка 1</div>
<div class="item">Игрушка 2</div>
<div class="item">Игрушка 3</div>
</div>
css
.container {
display: flex; /* Делаем коробку волшебной */
flex-direction: row; /* Располагаем игрушки в ряд */
justify-content: space-around; /* Равномерно распределяем игрушки */
align-items: center; /* Выравниваем игрушки по центру по вертикали */
}
.item {
background-color: lightblue; /* Красим игрушки в светло-голубой */
padding: 10px; /* Добавляем отступы внутри игрушек */
}
Пример 2: Flex-wrap и flex-grow
<div class="container">
<div class="item">Игрушка 1</div>
<div class="item">Игрушка 2</div>
<div class="item">Игрушка 3</div>
<div class="item">Игрушка 4</div>
<div class="item">Игрушка 5</div>
</div>
css
.container {
display: flex; /* Делаем коробку волшебной */
flex-wrap: wrap; /* Позволяем игрушкам переноситься на новую строку */
justify-content: space-between; /* Равномерно распределяем игрушки */
}
.item {
background-color: lightgreen; /* Красим игрушки в светло-зеленый */
flex-grow: 1; /* Позволяем игрушкам расти */
margin: 5px; /* Добавляем промежутки между игрушками */
padding: 20px; /* Добавляем отступы внутри игрушек */
}
Заключение
Flexbox — это как волшебная коробка, которая помогает красиво и удобно расставить игрушки (элементы) на веб-странице. Пробуй разные свойства и смотри, как они работают, чтобы лучше понять, как использовать Flexbox для создания гибких макетов.