TG Telegram Group & Channel
Frontend | Вопросы собесов | United States America (US)
Create: Update:

🤔 Что такое flexbox?

Flexbox (Flexible Box Layout) – это модель размещения элементов в CSS, которая делает макет гибким и удобным для адаптивной верстки.

Главные особенности
🟠Гибкое выравнивание
элементов в строку или колонку
🟠Равномерное распределение
пространства между элементами
🟠Упрощает адаптивную верстку
без float и position
🟠Легкое центрирование
элементов

🚩Основные термины Flexbox

Когда включается display: flex;, элементы внутри него становятся флекс-элементами.

Flex-контейнер → родительский элемент (display: flex;)
Flex-элементы → дочерние элементы контейнера
Главная ось (main axis) → ось, вдоль которой расположены элементы
Поперечная ось (cross axis) → перпендикулярная ось

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

.container {
display: flex;
}


🚩Основные свойства Flexbox

🟠`display: flex;`
Включает Flexbox для контейнера.
.container {
display: flex;
}


🟠`flex-direction` – направление оси
Определяет, как располагаются элементы (по горизонтали или вертикали).
.container {
flex-direction: row; /* По умолчанию: слева направо */
}
/* Другие значения */
.container {
flex-direction: column; /* В столбик */
flex-direction: row-reverse; /* Справа налево */
flex-direction: column-reverse; /* Вниз-вверх */
}


🟠`justify-content` – выравнивание по главной оси
.container {
justify-content: flex-start; /* По умолчанию, слева направо */
justify-content: center; /* Центр */
justify-content: flex-end; /* Справа налево */
justify-content: space-between; /* Равномерное распределение */
justify-content: space-around; /* С отступами */
justify-content: space-evenly; /* Равномерные промежутки */
}


🟠`align-items` – выравнивание по поперечной оси
.container {
align-items: stretch; /* По умолчанию (растягивает) */
align-items: center; /* Центр по вертикали */
align-items: flex-start; /* Вверх */
align-items: flex-end; /* Вниз */
align-items: baseline; /* По базовой линии текста */
}


🟠`flex-wrap` – перенос элементов на новую строку
.container {
flex-wrap: nowrap; /* По умолчанию – все в одной строке */
flex-wrap: wrap; /* Элементы переносятся */
flex-wrap: wrap-reverse; /* Перенос в обратном порядке */
}


🟠`align-content` – выравнивание строк (если `flex-wrap: wrap;`)
Работает, когда элементы занимают несколько строк.
.container {
align-content: flex-start; /* Вверх */
align-content: flex-end; /* Вниз */
align-content: center; /* По центру */
align-content: space-between; /* Равномерное распределение */
align-content: space-around; /* С отступами */
align-content: stretch; /* Растянуть (по умолчанию) */
}


🚩Управление отдельными элементами (`flex`-элементы)

flex-grow – рост элемента
.item {
flex-grow: 1; /* Растянется, если есть место */
}

flex-shrink – сжатие элемента
.item {
flex-shrink: 0; /* Не уменьшаться */
}


flex-basis – начальный размер элемента
.item {
flex-basis: 200px; /* Фиксированный размер */
}


Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое flexbox?

Flexbox (Flexible Box Layout) – это модель размещения элементов в CSS, которая делает макет гибким и удобным для адаптивной верстки.

Главные особенности
🟠Гибкое выравнивание
элементов в строку или колонку
🟠Равномерное распределение
пространства между элементами
🟠Упрощает адаптивную верстку
без float и position
🟠Легкое центрирование
элементов

🚩Основные термины Flexbox

Когда включается display: flex;, элементы внутри него становятся флекс-элементами.

Flex-контейнер → родительский элемент (display: flex;)
Flex-элементы → дочерние элементы контейнера
Главная ось (main axis) → ось, вдоль которой расположены элементы
Поперечная ось (cross axis) → перпендикулярная ось
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>

.container {
display: flex;
}


🚩Основные свойства Flexbox

🟠`display: flex;`
Включает Flexbox для контейнера.
.container {
display: flex;
}


🟠`flex-direction` – направление оси
Определяет, как располагаются элементы (по горизонтали или вертикали).
.container {
flex-direction: row; /* По умолчанию: слева направо */
}
/* Другие значения */
.container {
flex-direction: column; /* В столбик */
flex-direction: row-reverse; /* Справа налево */
flex-direction: column-reverse; /* Вниз-вверх */
}


🟠`justify-content` – выравнивание по главной оси
.container {
justify-content: flex-start; /* По умолчанию, слева направо */
justify-content: center; /* Центр */
justify-content: flex-end; /* Справа налево */
justify-content: space-between; /* Равномерное распределение */
justify-content: space-around; /* С отступами */
justify-content: space-evenly; /* Равномерные промежутки */
}


🟠`align-items` – выравнивание по поперечной оси
.container {
align-items: stretch; /* По умолчанию (растягивает) */
align-items: center; /* Центр по вертикали */
align-items: flex-start; /* Вверх */
align-items: flex-end; /* Вниз */
align-items: baseline; /* По базовой линии текста */
}


🟠`flex-wrap` – перенос элементов на новую строку
.container {
flex-wrap: nowrap; /* По умолчанию – все в одной строке */
flex-wrap: wrap; /* Элементы переносятся */
flex-wrap: wrap-reverse; /* Перенос в обратном порядке */
}


🟠`align-content` – выравнивание строк (если `flex-wrap: wrap;`)
Работает, когда элементы занимают несколько строк.
.container {
align-content: flex-start; /* Вверх */
align-content: flex-end; /* Вниз */
align-content: center; /* По центру */
align-content: space-between; /* Равномерное распределение */
align-content: space-around; /* С отступами */
align-content: stretch; /* Растянуть (по умолчанию) */
}


🚩Управление отдельными элементами (`flex`-элементы)

flex-grow – рост элемента
.item {
flex-grow: 1; /* Растянется, если есть место */
}

flex-shrink – сжатие элемента
.item {
flex-shrink: 0; /* Не уменьшаться */
}


flex-basis – начальный размер элемента
.item {
flex-basis: 200px; /* Фиксированный размер */
}


Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍26


>>Click here to continue<<

Frontend | Вопросы собесов




Share with your best friend
VIEW MORE

United States America Popular Telegram Group (US)