Содержание
- Свойство display
- flex-direction
- justify-content
- align-items
- flex-wrap
- flex-flow
- align-content
- 6 ответов 6
Свойство display
Устанавливает отображение flexbox для дочерних элементов.
flex-direction
Определяет направление, в котором расположатся дочерние элементы (в вертикальном или горизонтальном). Префикс -reverse меняет порядок расположения элементов на обратный.
- row(по умолчанию) слева направо
- row-reverse справа налево
- column сверху вниз
- column-reverse снизу вверх
justify-content
Устанавливает выравнивание дочерних элементов по горизонтали (если flex-direction: row) или вертикали (если flex-direction: column).
- flex-start(по умолчанию) выравнивание по левому краю
- flex-end по правому краю
- center по середине
- space-between расширяет пространство между элементами так, чтобы первый элемент касался левого края, а последний – правого
- space-around расстояние между элементами одинаково, а расстояние между крайними элементами и границами родителя равно половине расстояния между элементами
- space-evenly расстояния между элементами и границами родителя равны
align-items
Устанавливает выравнивание дочерних элементов по вертикали (если flex-direction: row) или по горизонтали (если flex-direction: column).
- stretch(по умолчанию) растянуть элементы так, чтобы заполнить родительский блок
- flex-start выравнивание по верхнему краю
- flex-end по нижнему краю
- center по центру
- baseline по первой строке текста
flex-wrap
Разрешает перенос элементов на новую строку. По умолчанию перенос запрещён.
- nowrap(по умолчанию) все элементы выстроены одной строкой
- wrap элементы могут переноситься на следующую строку
- wrap-reverse строки расположены в обратном порядке
flex-flow
Сокращённая запись двух свойств flex-direction и flex-wrap. По умолчанию row nowrap
align-content
Если дочерние элементы flexbox не помещаются в ширину блока и разрешён перенос элементов на новую строку (flex-wrap: wrap), то при помощи align-content можно настроить выравнивание этих строк.
Выравнивание может выполняться относительно горизонтали или вертикали в зависимости от значения свойства flex-direction.
- stretch(по умолчанию) растягивает высоту строк настолько, чтобы заполнить блок
- flex-start выравнивание относительно начала блока
- flex-end относительно конца
- center относительно центра
- space-between первая строка в начале блока, последняя в конце. Расстояние между всеми строками равно
- space-around аналогично space-between, но расстояние между первой строкой и началом блока и последней строкой и концом блока равно половине расстояния между строками
Дата публикации: 2019-05-29
От автора: вот проблема: если вы хотите создать макет с несколькими строками элементов, как вы можете контролировать во flexbox перенос элементов на новую строку?
Предположим, вы хотите создать макет, который выглядит примерно так, с чередующимися строками из трех элементов и одним элементом на всю ширину:
Распространенным способом управления позиционированием и размером flex-элементов является использование width или flex-basic; если мы установим для четвертого элемента width 100%, он будет расположен в отдельной строке. Но что, если мы не хотим или не можем установить ширину отдельных элементов? Или есть ли способ просто указать flexbox разрыв строки в определенных точках?
Нет никакого свойства, которое мы могли бы установить для flex, чтобы оно переносило элементы на новую строку, но мы можем вставить перенос строки (вы можете представить это, как br) между двумя flex-элементами для достижения чего-то похожего:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Есть Flexbox сетка.
Как перенести .new-string на новую строку вместе с элементами, которые идут после него?
6 ответов 6
Примечание переводчика: flex-элемент (flex item) — непосредственный ребёнок блока с display: flex .
Наиболее простое и надёжное решение — это вставка flex-элементов в правильных местах. Если они достаточно широкие ( width: 100% ), они будут создавать перенос строки.
Но это уродливо и не семантически. Вместо этого, мы можем генерировать псевдоэлементы внутры flex-контейнера и использовать свойство order чтобы перемещать их в нужные места.
Но есть ограничение: flex-контейнер может иметь только псевдоэлементы ::before и ::after . Это значит, что мы можем создать только 2 переноса строки.
Чтобы разрешить это, вы можете генерировать псевдоэлементы внутри flex-элементов вместо flex-контейнера. Таким способом вы не будете ограничены двумя. Но эти псевдоэлементы не будут flex-элементами, поэтому не будут создавать переносы строк.
Но, к счастью, спецификация CSS Display L3 ввела display: contents (в данный момент поддерживаемая только Firefox 37):
Элемент сам по себе не генерирует никаких блоков, но его дети и псевдоэлементы генерируют блоки как обычно. С целью генерации блоков и разметки элемент будет расцениваться как будто он был заменён его детьми и псевдоэлементами в дереве документа.
Поэтому вы можете применять display: contents к детям flex-контейнера и обернуть содержимое каждого внутрь дополнительного блок. Таким образом flex-элементы будут этими дополнительными обёртками и псевдоэлементами детей.
Кроме того, в соответствии с Fragmenting Flex Layout и CSS Fragmentation, flexbox позволяет принудительные переносы с помощью break-before , break-after или их псевдонимов в CSS 2.1:
Принудительные переносы строк во flexbox ещё широко не поддерживаются, но они работают в Firefox.
Источник: