Направление flex-direction¶
Flex-элементы во flex-контейнере могут иметь определенное направление, а именно они могут располагаться в виде строк или в виде столбцов.
Для управления направлением элементов CSS3 предоставляет свойство flex-direction . Оно определяет направление элементов и может принимать следующие значения:
- row : значение по умолчанию, при котором элементы располагаются в виде строки слева направо
- row-reverse : элементы также располагаются в виде стоки только в обратном порядке справа налево
- column : элементы располагаются в столбик сверху вниз
- column-reverse : элементы располагаются в столбик в обратном порядке снизу вверх
Например, расположение в виде строки:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
html> head> meta charset="utf-8" /> title>Flexbox в CSS3title> style> .flex-container display: flex; border: 1px solid #ccc; > .row flex-direction: row; > .row-reverse flex-direction: row-reverse; > .flex-item text-align: center; font-size: 1.1em; padding: 1.5em; color: white; > .color1 background-color: #675ba7; > .color2 background-color: #9bc850; > .color3 background-color: #a62e5c; > style> head> body> h3>Rowh3> div class="flex-container row"> div class="flex-item color1">Flex Item 1div> div class="flex-item color2">Flex Item 2div> div class="flex-item color3">Flex Item 3div> div> h3>Row-reverseh3> div class="flex-container row-reverse"> div class="flex-item color1">Flex Item 1div> div class="flex-item color2">Flex Item 2div> div class="flex-item color3">Flex Item 3div> div> body> html> 
Аналогично работает расположение в виде столбца:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
html> head> meta charset="utf-8" /> title>Flexbox в CSS3title> style> .flex-container display: flex; border: 1px solid #ccc; > .column flex-direction: column; > .column-reverse flex-direction: column-reverse; > .flex-item text-align: center; font-size: 1em; padding: 1.2em; color: white; > .color1 background-color: #675ba7; > .color2 background-color: #9bc850; > .color3 background-color: #a62e5c; > style> head> body> h3>Columnh3> div class="flex-container column"> div class="flex-item color1">Flex Item 1div> div class="flex-item color2">Flex Item 2div> div class="flex-item color3">Flex Item 3div> div> h3>Column-reverseh3> div class="flex-container column-reverse"> div class="flex-item color1">Flex Item 1div> div class="flex-item color2">Flex Item 2div> div class="flex-item color3">Flex Item 3div> div> body> html> Расположить элементы в столбец
Нужно расположить 2 diva (один из которых пустой) в 1 колонку, используя flex, и указывая ширину\высоту в %. Т.е чтоб это было адаптивным. Можно ли это сделать на flex? Или только на grid? В итоге должно получиться
.container < display:flex; >.a < width:100%; background-color:red; >.b
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget sodales neque, quis blandit risus. Etiam ultrices convallis ipsum a viverra. In est felis, dapibus sit amet est in, aliquet ullamcorper urna. Отслеживать
задан 24 авг 2019 в 19:05
1 1 1 серебряный знак 2 2 бронзовых знака
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Чтобы расположить два блока друг под другом через Flexbox, достаточно для родителя указать flex-direction: column .
Но вот задать высоту дочерних элементов в процентах не получится.
В CSS существуют проблемы с определением высоты элемента относительно родителя в процентах, так как Вы загоняете алгоритм отрисовки в цикличность и тупик.
Ведь высота родительского блока заранее неизвестна и определяется суммарной высотой содержимого. Но одновременно с этим, Вы хотите, чтобы высота содержимого определялась как половина от высоты родителя (которая заранее неизвестна). Нет точки отсчёта
flex-wrap
Baseline is determined by this web feature being supported on the current and the previous major versions of major browsers.
Свойство CSS flex-wrap задаёт правила вывода flex-элементов — в одну строку или в несколько, с переносом блоков. Если перенос разрешён, то возможно задать направление, в котором выводятся блоки.
Интерактивный пример
| Начальное значение | nowrap |
|---|---|
| Применяется к | flex-контейнеры |
| Наследуется | нет |
| Обработка значения | как указано |
| Animation type | discrete |
Подробнее о свойствах и дополнительную информацию смотрите Основные понятия Flexbox.
Синтаксис
flex-wrap: nowrap; /* Default value */ flex-wrap: wrap; flex-wrap: wrap-reverse; /* Глобальные значения */ flex-wrap: inherit; flex-wrap: initial; flex-wrap: revert; flex-wrap: revert-layer; flex-wrap: unset;
Свойство flex-wrap может содержать одно из следующих ниже значений.
Значения
Допускаются следующие значения:
Расположение в одну линию, может привести к переполнению контейнера. Свойство cross-start эквивалентно start или before в зависимости от значения flex-direction .
Расположение в несколько линий. Свойство cross-start эквивалентно start или before в зависимости от значения flex-direction и свойство cross-end противоположно cross-start.
Ведёт себя так же, как и wrap , но cross-start и cross-end инвертированы.
Формальный синтаксис
flex-wrap =
nowrap | (en-US)
wrap | (en-US)
wrap-reverse
Примеры
HTML
h4>This is an example for flex-wrap:wraph4> div class="content"> div class="red">1div> div class="green">2div> div class="blue">3div> div> h4>This is an example for flex-wrap:nowraph4> div class="content1"> div class="red">1div> div class="green">2div> div class="blue">3div> div> h4>This is an example for flex-wrap:wrap-reverseh4> div class="content2"> div class="red">1div> div class="green">2div> div class="blue">3div> div>
CSS
/* Common Styles */ .content, .content1, .content2 color: #fff; font: 100 24px/100px sans-serif; height: 150px; text-align: center; > .content div, .content1 div, .content2 div height: 50%; width: 50%; > .red background: orangered; > .green background: yellowgreen; > .blue background: steelblue; > /* Flexbox Styles */ .content display: flex; flex-wrap: wrap; > .content1 display: flex; flex-wrap: nowrap; > .content2 display: flex; flex-wrap: wrap-reverse; >
Результат
Спецификации
| Specification |
|---|
| CSS Flexible Box Layout Module Level 1 # flex-wrap-property |
Совместимость с браузерами
BCD tables only load in the browser
Волшебное свойство display, или типы отображения элементов html
Css-свойство display задаёт тип отображения элемента. На русский язык его можно перевести фразой: «Веди себя как». То есть, берём любой элемент html и говорим ему: веди себя как… блок, строка, таблица или вообще как будто тебя нет.
Все существующие на данный момент значения свойства display:
- none
- block
- inline
- list-item
- inherit
- inline-block
- inline-table
- table
- table-row
- table-cell
- table-column
- table-header-group
- table-footer-group
- table-column-group
- table-row-group
- table-caption
- run-in
В CSS 2 были значения compact и marker, но в CSS 2.1 они исчезли и в CSS 3 не вернулись. Встретите в старых справках — не обращайте внимания.
К сожалению, возможности применения свойства display ограничивает браузер IE7, который из всех значений понимает только 4: none, block, inline, list-item. Значение inline-block IE7 поддерживает лишь для строчных элементов . Также IE7 и IE8 элементы таблиц (table, tr, td, и другие) со значениями block и inline всё равно обрабатывает как табличные (и, похоже, в 9 и 10 положение не изменилось). Гугль Хром также не учитывает значение inline для таблиц.
Далее пойдёт речь о значениях свойства display, применимых в ИЕ7.
Заметьте : свойство display изменяет поведение элемента, но не классовую принадлежность. Так, по стандартам html в изначально строчные элементы нельзя вкладывать блочные, и изменение свойств через css не отменяет этого правила. Другими словами, если вы сделали span блочным, класть в него p, table или div всё равно не следует. Так же span или a нельзя вкладывать непосредственно в элемент body, т. к. в нём могут размещаться только элементы блочного типа. И обратно: элемент div со значением inline не может размещаться в элементах p или a, потому что их непосредственными потомками могут быть только элементы группы Inline.
Display: none: «веди себя так, как будто тебя нет»
Значение none свойства display делает любой элемент html невидимым. Действие правила display: none отличается от действия правила visibility: hidden тем, что первое прячет элемент полностью, как будто его нет вовсе, а второе делает его невидимым, но резервирует положенное под элемент место, оставляя «проём». Пример.
По умолчанию display имеет значение none у элементов head, style, script. Да-да ! Если вы нечаянно назначите им другое значение display, вас может ждать surprise (если вы не пользуетесь IE). Вот такой: «Мы все тут блочные!». Или такой: «Мы все тут строчные!». Элементы head, title и css просто вываливают своё текстовое содержание в виде строки.
Возможное применение правила display: none
- Нехорошее: чтобы скрыть блок текста или ссылок от людей и показать поисковикам. Не советую.
- Хорошее: в сочетании с javascript для динамических эффектов — выпадающие меню, всплывающие справки, выезжающие и убирающиеся панельки, и т. п. Бывают очень полезны, если применять без фанатизма.
Display: block: «веди себя так, как блочный элемент», или форматирование по блочному принципу
Свойство display со значением block делает любой элемент блочным со всем набором блочных свойств, а именно:
- блочный элемент (block level element) образует одну прямоугольную область (block box), перед и после которой строка переводится;
- блок по умолчанию занимает всю доступную ширину;
- размеры блока могу изменяться свойствами width и height ;
- к блочному элементу применимы вертикальные внешние отступы ( margin-top , margin-bottom ), а также отрицательные внешние отступы ( margin-left: -100px или margin-top: -20px );
- внутренние вертикальные отступы ( padding-top , padding-bottom ) влияют на суммарную высоту блочной области;
- к блочным элементам неприменимо вертикальное выравнивание ( vertical-align ), зато применимо горизонтальное ( text-align ).
По умолчанию блочными являются элементы:
Если очень глубоко прикапываться, то html, body, dt и dd формально не входят в группу блочных элементов html, но по факту они образуют блочные области и ведут себя соответственно.
Остальные элементы становятся блочными только с помощью css (как уже говорилось, исключением являются табличные элементы в IE).
Зачем это может понадобиться? Например:
- поставить строчные элементы, например, картинки, в «столбик», а не в строку;
- сделать блочными ссылки в меню, чтобы оформить их как «плашки» — с отступами, полями и прочими красивостями;
- ну и, конечно, в скриптовых эффектах «скрыть-убрать» в паре с display: none .
Display: inline: «веди себя так, как строка», или форматирование по строчному принципу
Значение inline превращает любой элемент html в строчный, или инлайновый. Строчный элемент (inline level element):
- может размещаться на одной строке с другими строчными элементами;
- может переходить на следующие строки, образуя несколько строчных областей (inline boxes);
- занимают ширину по содержанию;
- пробелы или переводы строк между строчными элементами браузер отображает как один пробел;
- у незамещаемых строчных элементов размеры области не управляются свойствами width и height ;
- внешние вертикальные отступы ( margin-top , margin-bottom ) на строчный элемент не действуют;
- горизонтальные внешние и внутренние отступы, а так же боковые рамки (border) действуют только на первую и последнюю из областей, образованных строчным элементом. Это проще показать, чем объяснять на словах, поэтому смотрим Пример. Внешние отступы ( margin-left , margin-right ) могут быть отрицательными;
- вертикальные внутренние отступы ( padding-top , padding-bottom ) влияют на общую высоту области, но не влияют на высоту строки, в которой она находится; в результате соседние строки могут перекрываться (предыдущие всегда перекрываются последующими); смотрим Пример;
- к строчным элементам применимо вертикальное выравнивание ( vertical-align ) по строчному типу; это значит, что область элемента смещается относительно строки, на которой располагается, и смещение можно задавать численно: Пример. Зато горизонтальное выравнивание ( text-align ) на строчные элементы не действует.
Зачем превращать блочный элемент в строчный? Например, чтобы превратить список в горизонтальное меню, назначив display: inline его пунктам; именно так реализовано верхнее меню и его нижний дубль на этом блоге. Или сделать фон заголовку не во всю ширину родителя, а по содержанию (по длине текста).
Display: list-item: «веди себя так, как пункт списка»
Пунктом списка по умолчанию является элемент li. Элемент с типом отображения list-item формирует две области: главную область (principal box) и область маркера (marker). Главная область ведёт себя по типу block и забирает на себя оформление, задаваемое в css. Маркер практически неуправляем: можно лишь изменить вид маркера через свойство list-style , а также через color и font-size (цвет и размер). Положением маркера управляет браузер, поэтому при замене стандартного маркера картинкой её не всегда удаётся выровнять кроссбраузерно. (Собственно, именно для работы с маркером и задумывалось несостоявшееся значение marker, и, видимо, именно по этой причине оно и не состоялось.)
Любой элемент, которому присвоено свойство display со значением list-item, отображается как пункт списка — с маркером, и к нему можно применять свойство list-style и его производные.
Справедливо и обратное: элемент li со свойством display: inline или block теряет маркер (в ИЕ7 — только для значения inline ).
В следующий раз я надеюсь описать более заковыристые значения свойства display, которые не годятся для применения в ИЕ7. А вам случалось ими пользоваться? Какие ещё случаи применения свойства display вы встречали?
Понравилось? Самое время поделиться заметкой!