CSS Flexbox: разработчики радуются размещению элементов на веб-сайте

Синтаксис:
div {
display: flex / inline-flex;
}

И flex, и inline-flex используются для включения Flexbox, однако их результат совсем другой. Эти два свойства выравнивают элементы внутри контейнера рядом друг с другом по главной оси (по умолчанию горизонтально), однако контейнер, для которого установлено значение flex, занимает всю доступную ширину. С другой стороны, контейнер с отображаемым значением inline flex принимает только ту ширину, которая требуется для размещения всех элементов.

Направление гибкости

Пока мы обсуждаем основы Flexbox, давайте также поговорим об основной оси и поперечной оси, которые учитываются при размещении элементов. Как упоминалось ранее, основная ось Flexbox по умолчанию установлена ​​горизонтально, и, соответственно, вертикальная ось оказывается поперечной осью. Однако это можно легко поменять местами, если разработчик желает выровнять элементы по вертикали, а не по горизонтали. Код, необходимый для этого, указан ниже в дополнение к синтаксису.

Синтаксис:
div {
flex-direction: column, (row: значение по умолчанию);
}

Кроме того, свойство Flex direction также принимает два других значения: row-reverse и column-reverse. Судя по названию, оба этих свойства меняют порядок элементов, помещенных в контейнер, со значением любого из них. Flex-direction со значением Column-reverse противоположен столбцу, так же как и row-reverse.

Flex Wrap

flex-wrap: nowrap || wrap || wrap-reverse;

Двигаясь вперед, давайте поговорим о следующем свойстве Flexbox, которым является Flex Wrap, которое позволяет содержащимся элементам создавать новый столбец или строку, которые потребуются, если для размещения всех элементов потребуется больше места. Это свойство может принимать три следующих значения:

1. Без переноса (значение по умолчанию, содержимое будет переполняться, если для содержащихся элементов требуется больше места, чем указано)
2. Перенос (позволяет гибкому родительскому элементу создавать дополнительную строку или столбец для размещения всех элементов)
3. Wrap-Reverse (дополнительная строка или столбцы, необходимые для размещения дополнительных элементов, будут созданы в предыдущей строке или)

Flex Flow

Затем у нас есть свойство flex-flow, которое позволяет назначить как направление гибкости, так и гибкость обертывания. Ниже приводится его синтаксис:

flex-parent {
гибкий поток: строка / столбец (направление) nowrap / wrap / wrap-reverse (flex-wrap);
}

Обоснование содержания

justify-content: flex-start || flex-end || center || space-between || space-around || space-evenly;

Следующим на очереди идет выравнивание содержимого, которое используется для выравнивания содержимого по главной оси. Он принимает следующие свойства:

1. flex-start: (по умолчанию) переносит все элементы в начало родительского элемента flex
2. flex-end: перемещает все элементы в конец родительского элемента flex
3. center: перемещает все элементы в центр гибкого родителя
4. space-between: первый и последний элементы перемещаются в крайнее левое и правое положение соответственно, а оставшееся пространство делится поровну между элементами.
5. space-around: все пространство делится и распределяется как с левой, так и с правой стороны элементов. Соответственно, первый и последний элементы выглядят так, как будто у них меньше места, чем у других, что не так, поскольку они наследуют пространство только одного элемента.
6. равномерно по пространству: все элементы получают одинаковое пространство между ними и вокруг, благодаря чему они выглядят равномерно расположенными как с левой, так и с правой стороны.

Выровнять элементы

align-items: stretch || flex-start|| flex-end|| center || baseline;

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

1. stretch (по умолчанию): расширяет элемент так, чтобы он занимал всю высоту поперечной оси
2. flex-start: переносит все элементы в начало / верх гибкого родителя
3. flex-end: перемещает все элементы в конечную точку / низ гибкого родителя
4. center: перемещает все элементы в центр гибкого родителя
5. базовая линия: все элементы выровнены на основе базовой линии текста внутри них, что может сделать их асимметричными.

Выровнять содержимое

Оба свойства выровнять элементы и выровнять контент используются для выравнивания содержимого по поперечной оси, однако в случае контейнеров Flexbox с несколькими столбцами, свойство align items не работает. Точно так же, если все гибкие элементы находятся в одной строке в контейнере, то выравнивание содержимого не оказывает никакого эффекта / результата.

Примечательно, что допустимые значения выравнивания содержимого несколько отличаются и перечислены ниже.

align-content: stretch || flex-start || flex-end || center || space-between || space-around;

1. stretch (по умолчанию): расширяет элемент на несколько столбцов, чтобы они занимали оставшуюся высоту поперечной оси.
2. flex-start: все элементы в многострочном гибком контейнере будут выровнены от начальной точки на «поперечной оси».
3. flex-end: все элементы в многострочном гибком контейнере будут выровнены по конечной точке на «поперечной оси».
4. center: перемещает все элементы в центр гибкого родителя по «поперечной оси».
5. пробел между: оставшееся пространство равномерно распределяется между гибкими элементами на «поперечной оси», аналогично justify-content: space-between, которое применимо к «главной оси».
6. space-around: оставшееся пространство равномерно распределяется вокруг гибких элементов на «поперечной оси» аналогично justify-content: space-around, которое применимо к «главной оси».

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

Заказ

Это свойство можно использовать для управления порядком различных элементов в гибком контейнере без изменения его положения в структуре HTML. Значение по умолчанию для всех элементов - 0, которое может быть изменено на положительные или отрицательные целые числа.

Чем выше значение порядка элемента, тем позже он помещается в гибкий контейнер. Например: элемент со значением порядка 5 будет размещен после всех элементов со значением порядка 4 или меньше, независимо от их размещения в источнике, которым является документ HTML.

[Примечание: элемент со значением порядка «-» отрицательный будет помещать его перед всеми другими элементами, порядок которых не определяется вручную, поскольку их значение по умолчанию равно 0, что больше любого отрицательного целого числа.]

Синтаксис
flex-child {
order: 0 (по умолчанию), отрицательное или положительное целое число;
}

Flex Grow

Это свойство пригодится, когда разработчик хочет, чтобы гибкий дочерний элемент включал оставшееся пространство в гибком контейнере, которое в противном случае выглядело бы как пустое пространство. Значение этого свойства по умолчанию - «0», и flex-children не расширяются сразу.

Чтобы изменить это свойство, можно установить любое положительное целое число, кроме нуля / «0». Примечательно, что разным дочерним элементам flex может быть присвоено разное значение flex-grow, а оставшееся пространство будет добавлено к их исходной ширине в реплексной пропорции.

Синтаксис
flex-child {
flex-grow: 0 (по умолчанию) | любое положительное целое число;
}

Flex Shrink

Гибкое сжатие - полная противоположность flex grow, и, как следует из названия, его можно использовать для сжатия элементов, если окно сужается ниже определенной ширины. Его значение по умолчанию - «0», которое может быть установлено на любое положительное целое число.

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

Синтаксис
flex-child {
flex-shrink: 0 (по умолчанию) | любое положительное целое число;
}

Flex Basis

Затем у нас есть свойство основы гибкости, которое можно применить к дочернему элементу гибкости. Он сравним со свойством width, так как принимает значения в px,%, em, rem и т. Д. Однако он применяется только в том случае, если в CSS используется свойство flex-grow или flex-shrink. По сути, применяется для установки базовой ширины, которая будет уменьшаться или увеличиваться в соответствии с определением.

Синтаксис
flex-child {
flex-base: 200px;
}

Flex

Свойство flex представляет собой не что иное, как сокращенный способ реализации гибкого роста, гибкого сжатия и гибкости на одной строке.

Синтаксис:
flex-child {
flex: 1 1 200px; [flex-grow, flex-child, flex-base]
}

Если этому свойству присвоено только одно значение, оно рассматривается как flex-grow, а остальные значения, например, flex-child и flex-base установлены по умолчанию.

Выровнять себя

Наконец, у нас есть свойство align-self, которое аналогично align-items, за исключением того факта, что первое применяется к гибкому дочернему элементу, а второе - к гибкий контейнер / родитель. Он принимает все те же значения, что и элементы выравнивания, которые включают следующее:

align-self: auto || stretch || flex-start || flex-end || center || baseline;

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

1. stretch (по умолчанию): расширяет элемент так, чтобы он занимал всю высоту поперечной оси
2. flex-start: переносит все элементы в начало / верх гибкого родителя
3. flex-end: перемещает все элементы в конечную точку / низ гибкого родителя
4. center: перемещает все элементы в центр гибкого родителя
5. базовая линия: все элементы выровнены на основе базовой линии текста внутри них, что может сделать их асимметричными.

(Я не владею авторскими правами на изображения, использованные в статье. Пожалуйста, свяжитесь для удаления с копией юридического документа о праве собственности)