CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Давайте попробуем понять это на практике.

Предположим, что у нас есть родительский контейнер, внутри которого находятся 4 дочерних контейнера (элемента) с метками. Весь макет выглядит так, как показано на рисунке ниже:

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

.container {
    display: flex;
}

По умолчанию flex позиционирует наши элементы по оси alig.

Мы можем изменить направление главной оси с помощью свойства flex-direction

• flex-direction: column

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

→ justify-content:

Выравнивает ось.

.container {
    display: flex;
    /* flex-direction: row; */
    justify-content: flex-end;
}

Имеет следующие значения:

• пространство между

• пространство вокруг

• равномерное пространство

• центр

• флекс-старт

• flex-end

→ Для размещения элементов вдоль поперечной оси мы используем функцию align-items

.container {
    display: flex;
    /* flex-direction: row; */
    justify-content: space-evenly;
    align-items: baseline;
}

.item-1 {
    font-size: 1.5rem;
}

→ когда мы добавляем больше элементов в контейнер, элементы сдавливают друг друга.

Поэтому здесь мы используем новое свойство:

• flex-wrap: no-wrap (по умолчанию)

Мы изменим его на flex-wrap: wrap

.container {
    display: flex;
    /* flex-direction: row; */
    /* justify-content: space-evenly;
    align-items: baseline; */
    flex-wrap: wrap;
}

• flex-wrap включает новое свойство : align-content

.container {
    display: flex;
    /* flex-direction: row; */
    /* justify-content: space-evenly;
    align-items: baseline; */
    flex-wrap: wrap;
    align-content: flex-end;
}

→ свойство gap

Gap : используется для промежутка между элементами

.container {
    display: flex;
    /* flex-direction: row; */
    /* justify-content: space-evenly;
    align-items: baseline; */
    flex-wrap: wrap;
    align-content: space-around;
    gap: 1rem;
}

• flex-grow

Flex-grow - свойство, используемое для предоставления оставшегося пространства элементу.

.container {
    display: flex;
}

.item-3 {
    flex-grow: 1;
}

• flex-shrink

Определяет, насколько быстро будет уменьшаться предмет по сравнению с другими предметами.

Для предмета, который не уменьшается вообще, мы задаем flex-shrink: 0

.container {
    display: flex;
}

.item-3 {
    flex-shrink: 5;
}

• flex-basis:

Если у элемента есть размер, т.е. ширина, и мы хотим заменить этот размер на что-то другое, то мы используем следующую команду

Например, наш элемент имеет размер 100px, и мы хотим изменить его на 300px. Мы используем свойство flex-basis

.container {
    display: flex;
}

.item-3 {
    flex-basis: 300px;
}

→ flex - это сокращение для flex-grow, flex-shrink и flex-basis вместе взятых.

.item-1 {
flex: 1;
}

• align-self

→ перезаписывает значение align-items в контейнере. но для отдельного элемента.

.container {
    display: flex;
}

.item-3 {
    align-self: flex-end;
}

→ заказать

Это свойство используется для изменения порядка появления элементов.

Все элементы по умолчанию имеют свойство порядка 0.

.container {
    display: flex;
}

.item-3 {
    order: -1;
}

Предложение: не использовать свойство order слишком часто, так как оно нарушает семантику и доступность HTML.