Лекция 14: Flexbox — современный способ выравнивания и распределения пространства

Привет! Готовы погрузиться в один из самых крутых и мощных инструментов CSS? Сегодня мы собираемся изучить Flexbox. Если вам когда-либо приходилось выравнивать элементы или распределять пространство аккуратно и оперативно, Flexbox — ваш новый лучший друг.

1. Что такое флексбокс?

Flexbox (Flexible Box Layout) — это одномерная система макета, которая позволяет вам контролировать выравнивание, интервалы и распределение элементов внутри контейнера, даже если размер этих элементов неизвестен или динамичен.

Думайте о Flexbox как о наборе инструментов для создания макетов, которые можно растягивать, сжимать или выравнивать в зависимости от доступного пространства.

2. Волшебство начинается с дисплея: flex

Чтобы начать использовать Flexbox, вам нужно всего лишь установить display: flex в контейнере. Как только вы это сделаете, все прямые дочерние элементы этого контейнера станут гибкими элементами, и они сразу же начнут вести себя по-другому.

    
Item 1
    
Item 2
    
Item 3

.flex-container {
    display: flex;
}

Теперь все элементы внутри .flex-container являются гибкими элементами, и ими можно легко манипулировать.

3. Гибкое направление – куда нам идти?

По умолчанию Flexbox располагает элементы в ряд (по горизонтали), но что, если вы хотите, чтобы они располагались в столбце (по вертикали)? Flexbox дает вам полный контроль с помощью свойства flex-direction.

• row: выравнивание элементов в горизонтальном ряду (это значение по умолчанию).
• столбец: размещайте элементы в вертикальном столбце.
• row-reverse: То же, что и row, но порядок элементов обратный.
• column-reverse: То же, что и столбец, но элементы располагаются в обратном порядке.

.flex-container {
    display: flex;
    flex-direction: column;
}

Теперь предметы будут складываться вертикально!

4. Обоснование содержания – распространение информации

Предположим, у вас есть три предмета, и вы хотите равномерно распределить их в контейнере. Вот тут-то и пригодится justify-content.

• flex-start: элементы выравниваются по началу контейнера (по умолчанию).
• центр: элементы центрируются.
• space-between: элементы располагаются на равном расстоянии друг от друга: первый элемент находится в начале, а последний — в конце.
• space-around: элементы располагаются с одинаковым отступом вокруг каждого элемента.

.flex-container {
    display: flex;
    justify-content: space-between;
}

Теперь элементы будут располагаться внутри контейнера равномерно.

5. Выравнивание предметов – вертикальная магия

В то время как justify-content контролирует горизонтальное выравнивание, align-items заботится о вертикальном выравнивании (или вдоль поперечной оси). Вот ваши варианты:

• растянуть: элементы растягиваются до заполнения контейнера (по умолчанию).
• flex-start: элементы выравниваются по верху.
• flex-end: элементы выравниваются по нижнему краю.
• center: элементы центрируются по вертикали.

.flex-container {
    display: flex;
    align-items: center;
}

Теперь все элементы будут центрированы по вертикали внутри контейнера.

6. Flex-Grow, Flex-Shrink и Flex-Basis – точная настройка гибких элементов

Иногда вам нужно, чтобы определенные элементы увеличивались, уменьшались или имели фиксированный начальный размер. Свойства flex-grow, flex-shrink и flex-basis позволяют контролировать такое поведение:

• flex-grow: контролирует, насколько элемент должен вырасти относительно других элементов.
• flex-shrink: определяет, насколько элемент должен уменьшаться относительно других элементов.
• flex-basis: устанавливает начальный размер элемента до того, как он увеличится или уменьшится.

Пример:

.item {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 100px;
}

Это гарантирует, что размер элемента начинается со 100 пикселей, но при необходимости он может увеличиваться, заполняя дополнительное пространство, не сжимаясь.

7. Пример флексбокса в действии

Давайте объединим все это на примере!

    
Item 1
    
Item 2
    
Item 3

.flex-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    height: 300px;
    background-color: #f0f0f0;
}

.item {
    background-color: #4CAF50;
    padding: 20px;
    color: white;
    flex-grow: 1;
}

В этом примере:

• Элементы расположены в ряд.
• Они расположены равномерно с помощью justify-content: space-around.
• Все элементы в контейнере центрируются по вертикали с помощью align-items: center.
• Каждый элемент увеличивается, чтобы одинаково заполнить доступное пространство, благодаря гибкому росту: 1.

8. Почему Flexbox хорош

Flexbox устраняет большую часть сложностей проектирования макетов, с которыми мы раньше сталкивались в CSS. Больше никаких плавающих элементов, больше не нужно беспокоиться об очистке, а адаптивный дизайн стал намного проще!

Ключевые выводы:

• Используйте display: flex, чтобы превратить контейнер в гибкий контейнер.
• Используйте flex-direction, чтобы задать направление потока (строку или столбец).
• Используйте justify-content и align-items для управления интервалами и выравниванием.
• Точная настройка гибких элементов с помощью flex-grow, flex-shrink и flex-basis.

следуй за мной в LinkedIn-

Ридой Хасан