CSS Grid и Flexbox: сравнение на практике. Хром флекс
CSS3 flexbox - описание всех свойств модуля, примеры верстки
CSS flexbox (Flexible Box Layout Module) — модуль макета гибкого контейнера — представляет собой способ компоновки элементов.
Flexbox состоит из flex-контейнера — родительского контейнера и flex-элементов — дочерних блоков. Дочерние элементы могут выстраиваться в строку или столбик, а оставшееся свободное пространство распределяется между ними различными способами.
Модуль flexbox позволяет решать следующие задачи:
- Располагать элементы в одном из четырех направлений: слева направо, справа налево, сверху вниз или снизу вверх;
- Переопределять порядок отображения элементов;
- Автоматически определять размеры элементов таким образом, чтобы они вписывались в доступное пространство;
- Решать проблему с горизонтальным и вертикальным центрированием;
- Переносить элементы внутри контейнера, не допуская их переполнения;
- Создавать колонки одинаковой высоты;
- Создавать прижатый к низу страницы подвал сайта.
В основе flexbox лежит идея оси. Flexbox является инструментом двумерной компоновки и использует для работы две оси — горизонтальную (главную ось) и поперечную.
Рис. 1. Модель flexboxЧто такое flexbox
Поддержка браузерами
IE: 11.0, 10.0 -ms-Firefox: 28.0, 18.0 -moz-Chrome: 29.0, 21.0 -webkit-Safari: 6.1 -webkit-Opera: 12.1 -webkit-iOS Safari: 7.0 -webkit-Opera Mini: 8Android Browser: 4.4, 4.1 -webkit-Chrome for Android: 44
1. Свойства flex-контейнера
Flex-контейнер устанавливает новый гибкий контекст форматирования для его содержимого. Flex-контейнер не является блочным контейнером, поэтому для внутренних блоков не работают такие CSS-свойства, как float, clear, vertical-align. Также, на flex-контейнер не оказывают влияние свойства column-, создающие колонки в тексте и псевдоэлементы ::first-line и ::first-letter.
1.1. Свойство display
Модель flexbox-разметки связана с определенным значением CSS-свойства display родительского html-элемента, содержащего внутри себя дочерние блоки. Для управления элементами с помощью этой модели нужно установить свойство display следующим образом:
После установки данных значений свойства каждый дочерний элемент автоматически становится flex-элементом, выстраиваясь в ряд (вдоль главной оси) колонками одинаковой высоты, равной высоте блока-контейнера. При этом блочные и строчные дочерние элементы ведут себя одинаково, т.е. ширина блоков равна ширине их содержимого с учетом внутренних полей и рамок элемента.
Рис. 2. Выравнивание элементов в модели flexboxЕсли родительский блок содержит текст или изображения без оберток, они становятся анонимными flex-элементами. Текст выравнивается по верхнему краю блока-контейнера, а высота изображения становится равной высоте блока, т.е. оно деформируется.
1.2. Выравнивание элементов по горизонтали justify-content
Свойство выравнивает flex-элементы по ширине flex-контейнера, распределяя оставшееся свободное пространство, незанятое flex-элементами. Для выравнивания элементов по вертикали используется свойство align-content. Свойство не наследуется.
| Значения: | |
| flex-start | Значение по умолчанию. Flex-элементы позиционируются от начала flex-контейнера. |
| flex-end | Flex-элементы позиционируются относительно правой границы flex-контейнера. |
| center | Flex-элементы выравниваются по центру flex-контейнера. |
| space-between | Flex-элементы выравниваются по главной оси, свободное место между ними распределяется следующим образом: первый блок располагается в начале flex-контейнера, последний блок – в конце, все остальные блоки равномерно распределены в оставшемся пространстве, а свободное пространство равномерно распределяется между элементами. |
| space-around | Flex-элементы выравниваются по главной оси, а свободное место делится поровну, добавляя отступы справа и слева. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Рис. 3. Выравнивание элементов и распределение свободного пространства с помощью свойства justify-contentСинтаксис
.flex-container { display: -webkit-flex; -webkit-justify-content: flex-start; display: flex; justify-content: flex-start; }1.3. Выравнивание элементов по вертикали align-items
Свойство выравнивает flex-элементы, в том числе и анонимные flex-элементы по перпендикулярной оси (по высоте). Не наследуется.
| Значения: | |
| stretch | Значение по умолчанию. Flex-элементы растягиваются, занимая все пространство по высоте. |
| flex-start | Flex-элементы выравниваются по левому краю flex-контейнера относительно верхнего края блока-контейнера. |
| flex-end | Flex-элементы выравниваются по левому краю flex-контейнера относительно нижнего края блока-контейнера. |
| center | Flex-элементы выравниваются по центру flex-контейнера. |
| baseline | Flex-элементы выравниваются по базовой линии. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Рис. 4. Выравнивание элементов в контейнере по вертикалиСинтаксис
.flex-container { display: -webkit-flex; -webkit-align-items: flex-start; display: flex; align-items: flex-start; }1.4. Направление главной оси flex-direction
Свойство определяет, каким образом flex-элементы укладываются во flex-контейнере, задавая направление главной оси flex-контейнера. Они могут располагаться в двух главных направлениях — горизонтально, как строки или вертикально, как колонки. Главная ось по умолчанию идет слева направо. Поперечная – сверху вниз. Свойство не наследуется.
| Значения: | |
| row | Значение по умолчанию, слева направо (в rtl справа налево). Flex-элементы выкладываются в строку. Начало (main-start) и конец (main-end) направления главной оси соответствуют началу (inline-start) и концу (inline-end) инлайн оси (inline-axis). |
| row-reverse | Направление справа налево (в rtl слева направо). Flex-элементы выкладываются в строку относительно правого края контейнера (в rtl — левого). |
| column | Направление сверху вниз. Flex-элементы выкладываются в колонку. |
| column-reverse | Колонка с элементами в обратном порядке, снизу вверх. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Рис. 5. Свойство flex-direction для блочных и строчных элементовСинтаксис
.flex-container { display: -webkit-flex; -webkit-flex-direction: row-reverse; display: flex; flex-direction: row-reverse; }1.5. Многострочность элементов flex-wrap
Свойство управляет тем, как flex-контейнер будет выкладывать flex-элементы — в одну строку или в несколько, и направлением, в котором будут укладываться новые строки. По умолчанию flex-элементы укладываются в одну строку. При переполнении контейнера их содержимое будет выходить за границы flex-элементов. Не наследуется.
| Значения: | |
| nowrap | Значение по умолчанию. Flex-элементы не переносятся, а располагаются в одну линию слева направо (в rtl справа налево). |
| wrap | Flex-элементы переносятся, располагаясь в несколько горизонтальных рядов (если не помещаются в один ряд) в направлении слева направо (в rtl справа налево). |
| wrap-reverse | Flex-элементы переносятся, располагаясь в обратном порядке слева-направо, при этом перенос происходит снизу вверх. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Рис. 6. Управление многострочностью с помощью свойства flex-wrap1.6. Краткая запись направления и многострочности flex-flow
Свойство предоставляет возможность в одном свойстве задать направление главной оси и многострочность поперечной оси, т.е. сокращённая запись свойств flex-direction и flex-wrap. Значение по умолчанию flex-flow: row nowrap;. Не наследуется.
| Значения: | |
| направление | Указывает направление главной оси. Значение по умолчанию row. |
| многострочность | Задаёт многострочность поперечной оси. Значение по умолчанию nowrap. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
.flex-container { display: -webkit-flex; -webkit-flex-flow: row wrap; display: flex; flex-flow: row wrap; }1.7. Многострочное выравнивание align-content
Свойство выравнивает строки flex-элементов по вертикали во flex-контейнере, позволяя управлять свободным пространством.Свойство работает только в случае, если разрешен перенос строк и указано направление flex-flow: row/row-reverse/column/column-reverse wrap/wrap-reverse; и высота flex-контейнера. Не наследуется.
| Значения: | |
| stretch | Значение по умолчанию. Строки flex-элементов равномерно растягиваются, заполняя все доступное пространство. |
| flex-start | Строки flex-элементов выравниваются по левому краю flex-контейнера относительно верхнего края блока-контейнера. |
| flex-end | Строки flex-элементов выравниваются по левому краю flex-контейнера относительно нижнего края блока-контейнера. |
| center | Строки flex-элементов выравниваются по высоте по середине flex-контейнера относительно его левого края. |
| space-between | Строки flex-элементов выравниваются по высоте по середине flex-контейнера относительно его левого края. Свободное пространство распределяется между ними. Первый ряд flex-элементов прижимается к началу flex-контейнера, последний ряд — к нижнему краю. |
| space-around | Строки flex-элементов равномерно распределяются по высоте, свободное пространство добавляется сверху и снизу строки. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Рис. 7. Многострочное выравнивание flex-элементовСинтаксис
.flex-container { display: -webkit-flex; -webkit-flex-flow: row wrap; -webkit-align-content: flex-end; display: flex; flex-flow: row wrap; align-content: flex-end; height: 100px; }2. Свойства flex-элементов
2.1. Порядок отображения элементов order
Свойство определяет порядок, в котором flex-элементы отображаются внутри flex-контейнера. По умолчанию для всех flex-элементов задан порядок order: 0; и они следуют друг за другом по мере добавления во flex-контейнер. Самый первый flex-элемент по умолчанию расположен слева. Чтобы поставить любой flex-элемент в начало строки, ему нужно назначить order: -1;, в конец строки — order: 1;. Свойство не наследуется.
| Значения: | |
| число | Свойство задается целым числом, отвечающим за порядок отображения flex-элементов. Значение по умолчанию 0. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
.flex-container { display: -webkit-flex; display: flex; } .flex-item { -webkit-order: 1; order: 1; }
Рис. 8. Порядок отображения flex-элементов2.2. Базовая ширина элемента flex-basis
Свойство позволяет задать базовую ширину flex-элемента, относительно которой будет происходить растяжение flex-grow или сужение flex-shrink элемента. Не наследуется.
| Значения: | |
| auto | Значение по умолчанию. Элемент получает базовую ширину, соответствующую ширине контента внутри него, если она не задана явно. |
| число | Ширина элемента задается в px, %, em и других единицах измерения. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
.flex-container { display: -webkit-flex; display: flex; } .flex-item { -webkit-flex-basis: 100px; flex-basis: 100px; }2.3. Растяжение элементов flex-grow
Свойство определяет коэффициент увеличения ширины flex-элемента относительно других flex-элементов. Свойство не наследуется.
| Значения: | |
| число | Положительное целое или дробное число, устанавливающее коэффициент увеличения flex-элемента. Значение по умолчанию 0. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Рис. 10. Растяжение flex-элементов в строкеСинтаксис
.flex-container { display: -webkit-flex; display: flex; } .flex-item { -webkit-flex-grow: 3; flex-grow: 3; }2.4. Сужение элементов flex-shrink
Свойство указывает коэффициент уменьшения ширины flex-элемента относительно других flex-элементов. Работает только если для элемента задана ширина с помощью свойства flex-basis или width. Свойство не наследуется.
| Значения: | |
| число | Положительное целое или дробное число, устанавливающее коэффициент уменьшения flex-элемента. Значение по умолчанию 1. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Рис. 11. Сужение flex-элементов в строкеСинтаксис
.flex-container { display: -webkit-flex; display: flex; } .flex-item { -webkit-flex-shrink: 3; flex-shrink: 3; }2.5. Задание базовой ширины и трансформации элемента одним свойством flex
Свойство представляет собой сокращённую запись свойств flex-grow, flex-shrink и flex-basis. Значение по умолчанию: flex: 0 1 auto;. Можно указывать как одно, так и все три значения свойств. Свойство не наследуется.
W3C рекомендует использовать сокращённую запись, так как она правильно сбрасывает любые неуказанные компоненты, чтобы подстроиться под типичное использование.
| Значения: | |
| коэффициент растяжения | Коэффициент увеличения ширины flex-элемента относительно других flex-элементов. |
| коэффициент сужения | Коэффициент уменьшения ширины flex-элемента относительно других flex-элементов. |
| базовая ширина | Базовая ширина flex-элемента. |
| auto | Эквивалентно flex: 1 1 auto;. |
| none | Эквивалентно flex: 0 0 auto;. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
.flex-container { display: -webkit-flex; display: flex; } .flex-item { -webkit-flex: 3 1 100px; -ms-flex: 3 1 100px; flex: 3 1 100px; }2.6. Выравнивание отдельных элементов align-self
Свойство отвечает за выравнивание отдельно взятого flex-элемента по высоте flex-контейнера. Переопределяет выравнивание, заданное align-items. Не наследуется.
| Значения: | |
| auto | Значение по умолчанию. Flex-элемент использует выравнивание, указанное в свойстве align-items flex-контейнера. |
| flex-start | Flex-элемент выравнивается по верхнему краю flex-контейнера, относительно левой границы. |
| flex-end | Flex-элемент выравнивается по нижнему краю flex-контейнера, относительно левой границы. |
| center | Flex-элемент выравнивается по высоте по середине flex-контейнера, относительно левой границы. |
| baseline | Flex-элемент выравнивается по базовой линии flex-контейнера, относительно левой границы. |
| stretch | Flex-элемент растягивается на всю высоту flex-контейнера, при этом учитываются поля и отступы. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Рис. 12. Выравнивание отдельных flex-элементовСинтаксис
.flex-container { display: -webkit-flex; display: flex; } .flex-item { -webkit-align-self: center; align-self: center; }html5book.ru
Изучаем Flexbox | Кабинет Веб-мастера
Технологии не стоят на месте и мир высоких технологий развивается очень быстро. Тяжело успевать за техническим прогрессом и быть в курсе всех изменений.
Сегодня мы будем изучать долгожданное нововведение всех вебмастеров - Flexbox-лейаут или гибкие блоки.
Этот модуль призван сделать более эффективным верстку при выравнивании и распределении свободного пространства между элементами в контейнере, даже если их размер неизвестен или меняется динамически.
Начнем разбираться по порядку.
Для просмотра этой статьи и использования этих технологий, используйте современные браузеры
Поддержка браузерами: Google Chrome 21+, Opera 12.1+, Mozilla FireFox 22+, IE 10+, Safari 3+, Android 2.1+, iOS 3.2+.
Создадим простую структуру:
<div> <div>100500</div> <div>2</div> <div>3</div> </div>1 контейнер и 3 дочерних элемента. С этими элементами мы будем выполнять все манипуляции. Структура изменяться не будет, поэтому в дальнейшем буду приводить изменения только стилей css.
Итак, сейчас у нас все элемента блочные и без стилей все дочерние элементы будут располагаться друг под другом.
display:flex
Применяется к родительскому элементу. Определяет родительский элемент как блочный.
Поэтому добавим базовые стили, которые определят, что используемые нами элементы относятся к теме статьи:
.parent { display:flex; border:2px solid #FF8C00; padding:20px; width:760px; } .child { background-color:#ededed; border:2px solid #768D44; padding:30px; margin:10px; }В результате мы получим вот такую картинку:
При этом контейнер будет занимать всю доступную ширину (так как свойство display:flex определяет элемент как блочный) - для примера, ограничил ширину - 760px, а дочерние элементы занимают ширину по содержимому.
Если мы зададим родителю свойство display:inline-flex, то это определит родителя как блок-инлайновый элемент (при этом результат не изменится), родитель будет занимать ширину по содержимому (а вести себя как display:inline-block).
По умолчанию, дочерние элементы располагаются у левого края. Но это можно изменить:
.parent { display:flex; border:2px solid #FF8C00; padding:20px; width:760px; flex-direction:row-reverse; } .child { background-color:#ededed; border:2px solid #768D44; padding:30px; margin:10px; }
Теперь элементы располагаются справа-налево. И первый дочерний элемент стоит справа. (Если направление текста изменено для всех страницы на обратное - справа налево rtl, вместо ltr - то все свойства выравнивания - это и далее - работают наоборот).
flex-direction
Применяется к родительскому элементу. Устанавливает направление дочерних flex элементов.
Все доступные варианты выравнивания для свойства flex-direction:
- row (по умолчанию): слева направо для ltr, справа налево для rtl
- row-reverse: справа налево для ltr, слева направо для rtl
- column: аналогично row, сверху вниз
- column-reverse: аналогично row-reverse, снизу вверх
display:inline-flex
Применяется к родительскому элементу. Определяет родительский элемент как инлайн-блочный (аналог inline-block).
На картинке наглядно видна разница между display:flex и display:inline-flex на основе свойства flex-direction. Больше к этим свойствам обращаться не будем.
flex-wrap
Применяется к родительскому элементу. Определяет контейнер как однострочный или многострочный, а также направление расположения строк.
Все доступные варианты выравнивания для свойства flex-wrap:
- nowrap (по умолчанию): однострочный / слева направо для ltr, справа налево для rtl
- wrap: многострочный / слева направо для ltr, справа налево для rtl
- wrap-reverse: многострочный / справа налево для ltr, слева направо для rtl
Зададим стили для примера:
.parent { display:flex; border:2px solid #FF8C00; padding:20px; flex-wrap:wrap; } .child { background-color:#ededed; border:2px solid #768D44; padding:30px; margin:10px; }
Это свойство указывает, что если контейнеры не будут умещаться на экране, то они перенесутся на другую строку.
Применим свойство flex-wrap:wrap-reverse;:
.parent { display:flex; border:2px solid #FF8C00; padding:20px; flex-wrap:wrap-reverse; } .child { background-color:#ededed; border:2px solid #768D44; padding:30px; margin:10px; }
flex-flow
Применяется к родительскому элементу. Служит сокращением для flex-direction и flex-wrap.
Значение по умолчанию: flex-flow:row nowrap;
.parent { display:flex; border:2px solid #FF8C00; padding:20px; flex-flow:row nowrap; } .child { background-color:#ededed; border:2px solid #768D44; padding:30px; margin:10px; }justify-content
Применяется к родительскому элементу. Определяет выравнивание дочерних элементов внутри родителя. Помогает распределить свободное пространство в случае, когда элементы строки не тянутся, либо достигли своего максимального размера.
Все возможные значения для свойства:
- flex-start (по умолчанию): элементы сдвигаются к началу строки
- flex-end: элементы сдвигаются к концу строки
- center: элементы выравниваются по центру строки
- space-between: элементы распределяются равномерно (первый элемент в начале строки, последний — в конце)
- space-around: элементы распределяются равномерно с равным расстоянием между собой и границами строки
Зададим свойства для выравнивания элементов по центру:
.parent { display:flex; border:2px solid #FF8C00; padding:20px; width:760px; justify-content:center; } .child { background-color:#ededed; border:2px solid #768D44; padding:30px; margin:10px; }
align-items
Применяется к родительскому элементу. Выравнивает дочерние элементы по вертикали. Свойство работает аналогично justify-content, но перпендикулярно.
Все возможные значения для свойства:
- flex-start: граница cross-start для элементов располагается на позиции cross-start
- flex-end: граница cross-end для элементов располагается на позиции cross-end
- center: элементы выравниваются по центру поперечной оси
- baseline: элементы выравниваются по своей базовой линии
- stretch (по умолчанию): элементы растягиваютcя, заполняя контейнер (с учётом min-width/max-width)
Внимание! Для примера немного добавились стили:
.parent { display:flex; border:2px solid #FF8C00; padding:20px; width:760px; align-items:center; } .child { background-color:#ededed; border:2px solid #768D44; padding:30px; margin:10px; } .child:last-child { height:200px; }
align-content
Применяется к родительскому элементу. Свойство не работает с однострочным flexbox. Определяет выравнивание строк (аналогично свойству justify-content).
Все возможные значения свойства:
- flex-start: строки выравниваются относительно начала контейнера
- flex-end: строки выравниваются относительно конца контейнера
- center: строки выравниваются по центру контейнера
- space-between: строки распределяются равномерно (первая строка в начале строки, последняя — в конце)
- space-around: строки распределяются равномерно с равным расстоянием между собой
- stretch (по умолчанию): строки растягиваются, заполняя свободное пространство
Обновим стили для примера:
.parent { height:500px; display:flex; border:2px solid #FF8C00; padding:20px; width:760px; flex-wrap:wrap; align-content:space-around; } .child { background-color:#ededed; border:2px solid #768D44; padding:30px; margin:10px; width:100%; }
Это все свойства, которые применяются к родителю. Теперь разберем свойства, которые применяются к дочерним элементам.
order
Применяется к дочерним элементам. Определяет порядок расположения элементов (можно изменить исходный порядок расположения в контейнере).
Обновляем стили:
.parent { display:flex; border:2px solid #FF8C00; padding:20px; width:760px; } .child { background-color:#ededed; border:2px solid #768D44; padding:30px; margin:10px; } .child:first-child { order:3; }
Вуаля! Первый элемент стал последним.
flex-grow
Применяется к дочерним элементам. Принимает безразмерное значение, которое означает пропорцию, которую дочерний элемент занимает внутри родителя.
Если у всех дочерних элементов задано: flex-grow:1;, то они займут одинаковый размер (или 33,3333%). Если один из элементов будет иметь значение 2, то он будет занимать размер в 2 раза больше остальных.
Обновим стили:
.parent { display:flex; border:2px solid #FF8C00; padding:20px; width:760px; } .child { background-color:#ededed; border:2px solid #768D44; padding:30px; margin:10px; flex-grow:1; } .child:first-child { flex-grow:2; }
Первый элемент занимает в 2 раза больше места, чем другие.
flex-shrink
Применяется к дочерним элементам. Определяет возможность элементов сжиматься при необходимости.
По умолчанию значение 1. Отрицательные числа не принимаются. 0 - элемент не сжимается.
Обновим стили:
.parent { display:flex; border:2px solid #FF8C00; padding:20px; } .child { background-color:#ededed; border:2px solid #768D44; padding:30px; margin:10px; width:200px; flex-shrink:5; } .child:first-child { flex-shrink:1; }
Несмотря на то, что дочерние элементы имеют одинаковый размер, в примере 2 последних блока будут сжиматься в 5 раз быстрее первого.
flex-basis
Применяется к дочерним элементам. Определяет размер по умолчанию для элемента перед распределением пространства в контейнере (что-то похожее на width).
По умолчанию значение default auto. Принимает значение ширины (px, em и другие).
Обновим стили:
.parent { display:flex; border:2px solid #FF8C00; padding:20px; width:1060px; } .child { background-color:#ededed; border:2px solid #768D44; padding:30px; margin:10px; flex-basis:200px; }
В представленном примере все блоки имеют одинаковую начальную ширину - 200px.
flex
Применяется к дочерним элементам. Сокращение для flex-grow, flex-shrink и flex-basis. Второй и третий параметры не обязательны.
Значения по умолчанию: 0 1 auto.
Обновим стили:
.parent { display:flex; border:2px solid #FF8C00; padding:20px; width:760px; } .child { background-color:#ededed; border:2px solid #768D44; padding:30px; margin:10px; flex:none; }
В приведенном примере дочерние элементы имеют ширину по содержимому.
align-self
Применяется к дочерним элементам. Позволяет переопределить выравнивание, заданное в align-items для отдельных элементов.
Все возможные значения для свойства:
- flex-start: граница cross-start для элементов располагается на позиции cross-start
- flex-end: граница cross-end для элементов располагается на позиции cross-end
- center: элементы выравниваются по центру поперечной оси
- baseline: элементы выравниваются по своей базовой линии
- stretch (по умолчанию): элементы растягиваютcя, заполняя контейнер (с учётом min-width/max-width)
Обновим стили. Зададим другое выравнивание первому элементу:
.parent { display:flex; border:2px solid #FF8C00; padding:20px; width:760px; align-items:center; height:300px; } .child { background-color:#ededed; border:2px solid #768D44; padding:30px; margin:10px; } .child:first-child { align-self:flex-start; }
В приведенном примере - первый блок находится в начале родительского, а второй и третий выравнены по центру.
Ну и в заключение приведу пример, в которой в строку будут стоят 3 блока. Первый блок будет 200px, сжиматься и растягиваться не будет. Остальные 2 блока будут занимать все оставшееся пространство, причем как растягиваться так и сжиматься. Без flexbox это сделать достаточно проблематично. Посмотрим на код css при использовании flexbox:
.parent { display:flex; border:2px solid #FF8C00; padding:20px; width:760px; } .child { background-color:#ededed; border:2px solid #768D44; padding:30px; margin:10px; flex:1 200px; } .child:first-child { flex:0 0 200px; }
Вот и все! Обзорная экскурсия по flexbox закончена. Экспериментируйте и все получится!
webkab.ru
Как работает Flexbox | Блог web-разработчика
Что такое flexbox?
Flexbox представляет новый способ отображения блоков в макете с помощью css3 и предназначен для облегчения расположения элементов относительно друг друга. В этой статье мы рассмотрим самый новый синтаксис модели flexbox. В последнее время версии браузеров меняются достаточно быстро, так что вы будете в теме, когда модель flexbox будет поддерживаться широко в реальных проектах.
Для чего нужен Flexbox?
Разработчики на протяжении долгого времени использовали таблицы, float-элементы, inline-block и другие CSS свойства, чтобы придать блокам нужное расположение. Однако ни один из вышеперечисленных инструментов не был предназначен для создания сложных страниц и приложений, которые в настоящее время используются почти в каждом проекте. Простые вещи, как вертикальное центрирование, осуществлялись достаточно сложно. Создание же макета на основе жидких сеток вообще считается верхом профессионализма, вот почему широкое распространение получили CSS-фреймворки на основе сеток. Итак, если множество проектов часто используют жидкие сетки, блоки одинаковой высоты, вертикальное центрирование блоков и т.д., то возникает вопрос: "Почему до сих пор нет свойства, которе позволило бы осуществлять эти вещи быстро и просто?"
Целью Flexbox является решение всех этих проблем!
Статус спецификации и поддержка браузерами
Модель flexbox разрабатывается уже четвёртый год. Браузеры используют разные экспериментальные версии спецификации. В сентябре 2012 года 3-я проверка ситаксиса Flexbox группой разработчиков из W3C достигла статуса W3C Candidate. Это означает, что W3C утверждает текущий синтаксис и даёт добро на использование вендорных префиксов браузерами.
История изменений спецификации по Flexbox:
- Июль 2009 Working Draft (display: box;)
- Март 2011 Working Draft (display: flexbox;)
- Ноябрь 2011 Working Draft (display: flexbox;)
- Март 2012 Working Draft (display: flexbox;)
- Июнь 2012 Working Draft (display: flex;)
- Сентябрь 2012 Candidate Recommendation (display: flex;)
Браузеры получили быструю поддержку Flexbox. Chrome 22+, Opera 12.1+, IE10, Firefox >=16 уже поддерживают Flexbox. Я рекомендую использовать один из этих браузеров для просмотра примеров.
Концепция и терминология
Хотя flexbox и создан для облегчения расположения блоков в макете, что в прошлом часто вызывало трудности, а в некоторых ситуациях большие проблемы, потребуется еще определенное время для решения этих задач с помощью Flexbox в реальных проектах. Нюансы терминологии модели могут затруднить её использование. Давайте рассмотрим как работает Flexbox-модель.
Модель Flexbox включает в себя flex-контейнер (flex container) и flex-пункты (flex items). Flex container должен иметь свойство display со значением flex или inline-flex. Со значением flex контейнер представляет из себя блочный элемент, а с inline-flex - строчный (инлайновый).
Пример объявления flex container:
.flex-container { display: -webkit-flex; display: flex; }Flex container является родителем по отношению к flex items. Flex-пунктов может быть сколько угодно. Всё что находится вне flex-контейнера и внутри flex-пунктов отображается как обычно. Таким образо, Flexbox определяет, как flex-пункты будут расположены внутри flex-контейнера.
Flex линия
Flex items расположены внутри flex container вдоль flex line (flex линии). По умолчанию во flex-контейнере присутствует только одна flex-линия. Вот пример с двумя пунктами, расположенными по умолчанию вдоль flex-линии слева направо:
Writing modes (режимы отображения содержимого)
Важной частью настройки flexbox является изменение направления flex-линии. По умолчанию направление flex-линии совпадает с направлением текста: слева направо, сверху вниз.
В спецификации появился новый модуль writing modes. Он позволяет менять направление текста справа налево, или даже вертикально.
Данный модуль находтся в стадии разработки, но Chrome поддерживает CSS свойство direction. Если в предыдущем примере установить свойство direction: rtl (справа налево), то изменится не только направление отображения содержимого справа налево, но и direction flex-линии, что приведет к изменению макета.
Из данного примера можно сделать вывод, почему терминология Flexbox на данный момент настолько абстрактна. Нельзя просто указать “вправо”, “влево”, “вниз”, “вверх” когда мы не имеем понятия на каком языке написана данная страница (возможно на арабском - стиль письма справа налево!).
Главная и поперечная оси
Чтобы не зависеть от режима отображения содержимого direction, Flexbox использует концепцию главной оси и поперечной оси (Main Axis и Cross Axis). Flex-линия следуют по главной оси. Поперечная ось перпендикулярна главной оси. Имена начальных и конечных точек, а также направления каждой оси:
- Main Start
- Main End
- Main Direction (иногда называется Flow Direction)
- Cross Start
- Cross End
- Cross Direction
Перед тем как продолжить, важно понять терминологию главной и поперечной оси. Всё в модели flexbox расположено относительно этих двух осей. Во всех наших примерах режим наложения writing mode был слева направо, сверху вниз. Но вы должны иметь ввиду, что это может быть не всегда так.
Свойства Flex контейнера:
Flex-direction
Свойство flex-direction позволяет менять оси flex-контейнера. По умолчанию свойство flex-direction имеет значение row. В этом случае flex-пункты располагаются в соответствии с режимом writing-mode. Еще раз напомним, что это означает направление слева направо, сверху вниз (по умолчанию).
Другие возможные значения:
- row-reverse: Main Start И Main End меняются местами. Если даже writing-mode указан ltr (слева налево), то flex-пункты все равно будут расположены справа налево.
- column: Главная ось и поперечная ось меняются местами. Если режим отображения содержимого горизонтальный, то flex-пункты все равно будут располагаться вертикально.
- column-reverse: аналогично column только обратный.
Изменим в предыдущем примере свойство flex-direction на column:
Теперь flex-пункты располагаются вертикально.
justify-content
justify-content регулирует расположение flex-пунктов по главной оси. Возможные значения:
- flex-start (по умолчанию)
- flex-end
- center
- space-between
- space-around
Рассмотрим пример с justify-content : center чтобы flex-пункты центрировались по главной оси:
flex-start, flex-end, и center работают, соединившись вместе по главной оси. А вот space-between и space-around распределяют свободное пространство между flex-пунктами определённым способом. Приведу диаграмму из спецификации, которая показывает распределение justify-content:
align-items
align-items является дополнительным свойством к justify-content. align-items регулирует отображение flex-пунктов относительно перпендикулярной оси. Возможные значения:
- flex-start (по умолчанию)
- flex-end
- center
- baseline
- stretch
Рассмотрим примение свойства align-items:center, которе позволяет flex-пункты вертикально центрировать относительно перпендикулярной оси:
Итак, flex-start, flex-end, и center всегда располагаются соединившись вместе. Значение stretch довольно простое: оно заставляет flex-пункты растягиваться от Cross Start до Cross End, то есть по вертикали относительно flex-контейнера. baseline заставляет flex-пункты располагаться по базовой линии. Базовая линия вычисляется исходя из инлайнового содержимого flex-пунктов. Вот лучшее объяснение работы данных значений:
Flex-wrap
Во всех рассмотренных примерах flex-контейнер имел одну flex-линию. Использование свойства flex-wrap позволит создать flex-контейнер с разным количеством flex-линий. Возможные значения:
- nowrap (по умолчанию)
- wrap
- wrap-reverse
Если во flex-wrap установлено значение wrap, то во flex-пункты включаются дополнительные flex-линии, но только в том случае, если flex-пунктам не хватает пространства для расположения на одной flex-линии. Дополнительные flex-линии добавляются в направлении перпендикулярной оси.
Пример использования flex-wrap:
flex item 1
flex item 2
flex item 3
.flex-container { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; width: 700px; height: 240px; background-color: green; margin: 10px auto; } .flex-item { background-color: red; width: 300px; height: 100px; margin: 5px; }Значение wrap-reverse аналогично значению wrap за исключением того, что новые flex-линии добавляются в обратном направлении по перпендикулярной оси.
align-content
align-content изменяет поведение свойства flex-wrap. Это значение аналогично align-items только вместо выравнивания flex-пунктов, оно выравнивает flex-линии. Как и можно было ожидать, значения аналогичные:
- stretch (по умолчанию)
- flex-start
- flex-end
- center
- space-between
- space-around
Принцип работы этих значений аналогичный justify-content и align-items.
Пример align-content: center
flex item 1
flex item 2
flex item 3
.flex-container { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-content: center; align-content: center; width: 700px; height: 240px; background-color: green; margin: 10px auto; } .flex-item { background-color: red; width: 300px; height: 100px; margin: 5px; } .first { -webkit-order: -1; order: -1; }flex-flow
Данное свойство компонует в себя свойства flex-direction и flex-wrap.
flex-flow: [flex-direction] [flex-wrap]
Пример:
.flex-container { -webkit-flex-flow: column nowrap; flex-flow: column nowrap; }Свойства flex-пунктов (flex items)
Flex-пункт является дочерним блоком по отношению к flex-контейнеру. Содержимое flex-контейнера относится к flex-пункту этого контейнера. Содержимое flex-пункта отображается как обычно. Например, пока действует свойство float, flex-пункты никак на это не реагируют. Плавающие также могут находиться внутри самого flex-пункта.
Как говорят, flex-пункты имеют Main Size и Cross Size. Main Size – это размер flex-пункта в направлении главной оси, а Cross Size - в направлении поперечной оси. Фактически, шириной или высотой flex-пункта могут быть Main Size и Cross Size в зависимости от оси flex-контейнера.
Рассмотрим свойства, которые регулируют поведение flex-пунктов.
Order
Order является простейшим свойством. Порядок расположения flex-пунктов обеспечивается расположением flex-пунктов в HTML. В этом примере мы изменим значение свойства order одного flex-пункта на -1 и посмотрим, как при этом поменяется порядок расположения других flex-пунктов.
flex item 1
flex item 2
flex item 3
.flex-container { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-content: center; align-content: center; width: 700px; height: 240px; background-color: green; margin: 10px auto; } .flex-item { background-color: red; width: 300px; height: 100px; margin: 5px; } .first { -webkit-order: -1; order: -1; }Это свойство может оказаться полезным для доступности, когда порядок следования flex-пунктов в HTML должен быть одним, а вывод flex-пунктов на дисплее другим.
Margin
Наверняка вам знаком эффект margin: auto. Flexbox выполняет нечто подобное, но с еще более широкими возможностями. “auto” поглащает лишнее пространство. Это свойство может использоваться для разнообразного позиционирования flex-пунктов.
Например, объявим margin-right: auto; для первого flex-пункта, при этом он предоставит всё возможное свободное пространство справа от себя:
flex item 1
flex item 2
flex item 3
.flex-container { display: -webkit-flex; display: flex; -webkit-align-content: center; align-content: center; width: 700px; height: 240px; background-color: green; margin: 10px auto; } .flex-item { background-color: red; width: 100px; height: 100px; margin: 5px; } .flex-item:first-child{ margin-right: auto; }Теперь посмотрим на примере как работает margin: auto
align-self
Свойство align-self пункта служит для перекрытия свойства align-items flex-контейнера. Возможные значения аналогичные align-items:
- stretch (по умолчанию)
- flex-start
- flex-end
- center
- baseline
В этом примере мы назначим пунктам различные значения свойства align-self:
flex-start
flex-end
center
base
line
stretch
.flex-container { display: -webkit-flex; display: flex; -webkit-align-content: center; align-content: center; width: 700px; height: 240px; background-color: green; margin: 10px auto; } .flex-item { background-color: red; width: 100px; min-height:70px; margin: 5px; } .item1 { -webkit-align-self: flex-start; align-self: flex-start; } .item2 { -webkit-align-self: flex-end; align-self: flex-end; } .item3 { -webkit-align-self: center; align-self: center; } .item4 { -webkit-align-self: baseline; align-self: baseline; } .item5 { -webkit-align-self: baseline; align-self: baseline; padding: 2em 0; } .item6 { -webkit-align-self: stretch; align-self: stretch; }flex
Наконец-то мы дошли до свойства flex во Flexbox. Flex определяет,как flex-пункты будут использовать свободное пространство по главной оси. Рассмотрим каждое из возможных значений.
Flex:[number]
Такой синтаксис указывает какую часть должен занимать flex-пункт от общей ширины flex-контейнера. В следующем примере первый flex-пункт будет занимать 2/4 свободного места, а остальные два flex-пункта по 1/4:
Часто приходится равномерно распределять элементы по ширине. Для этого достаточно задать значение данного свойства 1 и все flex-пункты распределятся по ширине контейнера.
flex: initial
Flex-пункты с данным значением будет иметь строго фиксированную ширину, но только при наличии свободного пространства (при необходимости уменьшиться в размере - становится резиновым).
flex: auto
Flex-пункты становятся полностью резиновыми вдоль главной оси. Не корректно работает в Chrome 23.0.1271.95, поэтому лучше использовать flex: 1.
flex: none
flex-пункты становятся фиксированной ширины при всех ситуациях
advanced flex
Свойство flex можно использовать в режиме сокращения для придания спецефичности выбора flex-grow, flex-shrink, и flex-basis в одном объявлении: flex: [flex-grow] [flex-shrink] [flex-basis]
В большинтсве случаев не требуется такой синтаксис. Более того, для применения данного сокращения необходимо глубокое понимание модели Flexbox. Вы можете сделать каждое из свойств flex-grow, flex-shrink, и flex-basis специфичным. Я настоятельно рекомендую не использовать данное сокращение: по умолчанию придаются более разумные значения.
visibility
Когда реализуется свойство visibility: collapse; оно будет отличаться от значений visibility: hidden; и display: none; для flex-пунктов. Со значением collapse элемент задействует Cross Size flex-контейнера, но затрагивать пространство главной оси не будет. Это может быть полезным для динамического добавления или удаления flex-пунктов без оказания влияния на Cross Size flex-контейнера.
В настоящее время visibility: collapse; не коррексно работает в браузерах. На данный момент visibility: collapse; выполняет тоже самое что и visibility: hidden; Я уверен, что в ближайшее время ситуация изменится.
Посмотреть, как должно работать значение collapse в спецификации (http://www.w3.org/TR/css3-flexbox/#visibility-collapse)
Заключение
Как вы понимаете, Flexbox представляет мощное средство конструирования макетов. Он требует совершенно нового подхода для отображения блоков. Надеюсь, эта статья стала полезной для вас и вы сможете уже сейчас начать экспериментировать с макетами с помощью Flexbox. Будущее этой модели действительно потрясающее.
area53.ru
| CSS-Tricks по-русски
Как работает flexbox
Технология flexbox обещает спасти нас от проблем линейного CSS (таких как например вертикальное выравнивание).
В Firefox уже можно опробовать эту технологию. Однако освоение новой модели позиционирования может быть не таким простым.
Давайте посмотрим как работает flexbox, как мы можем использовать его для более простого позиционированния элементов.
Принцип позиционирования flexbox позволяет гибко и интуитивно строить лэйаут.
Чтобы достичь этого, он позволяет элементу контейнеру самому решать как расположить дочерние элементы.
Всё это хорошо звучит в теории. Но давайте посмотрим как это выглядит на практике.
В этой статье мы рассмотрим 5 наиболее распространённых свойств модели flexbox. Мы рассмотрим как можно использовать их и как будут выглядеть результаты.
Свойство 1: display: flex
Пример:
У нас есть четыре разноцветных элемента различных размеров, все находятся в одном контейнере. По умолчанию, свойство display для каждого элемента установлено в block. Таким образом, каждому элементу отводится строка по всей ширине.
Для того чтобы воспользоваться преимуществом flexbox, необходимо сообщить об этом контейнеру.
#container: { display: flex; }
Не так уж и много изменений, элементы выстроились в линию. Но за сценой произошло гораздо большее. Эти элементы получили нечто, называемое flex context.
Теперь можно позиционировать их внутри этого контекста, затрачивая на это гораздо меньше усилий, чем в традиционном CSS.
Свойство 2: flex-direction
У контейнера две оси координат, которые схематично выглядят так:
По умолчанию дочерние элементы выстраиваются вдоль основной оси слева направо. Именно поэтому элементы из предыдущего примера расположились горизонтально как только мы прописали контейнеру display: flex.
Свойство flex-direction позволяет изменять это поведение.
#container { display: flex; flex-direction: column; }
Одно важное замечание: flex-direction: column не выравнивает элементы вдоль второстепенной оси (cross axis), а делает второстепенную ось основной.
Есть ещё два значение для этого свойства: row-reverse и column-reverse.
Свойство 3: justify-content
Свойство justify-content управляет размещением элемента вдоль главной оси.
#container { display: block; flex-direction: row; justify-content: flex-start; }всего существует 5 значений для этого свойства:
- flex-start
- flex-end
- center
- space-between
- space-around
Разница между значениями space-around и space-between такова: space-between выделяет равное пространство между элементами, а space-around равное пространство вокруг каждого элемента, сдвигая его таким образом от контейнера.
Запомните: justify-content действует только вдоль главной оси, а flex-direction переключает оси. Это важно для следующего свойства.
Свойство 4: align-items
Свойство align-items работает точно так же как и justify-content, только вдоль второстепенной оси.
Всего существует 5 значений:
- flex-start
- flex-end
- center
- stretch
- baseline
Первые три точно такие же как и у justify-content, поэтому не будем их рассматривать ещё раз, а перейдём сразу к двум другим.
stretch выравнивает элементы по высоте, а baseline по нижней части параграфа.
Для значения stretch, также необходимо элементам установить высоту в auto.
По поводу baseline, будьте внимательны, если у вас не будет ни одного параграфа в элементах, они будут выровнены по нижней части, вот так:
Для того чтобы продемонстрировать принцип главной и второстепенной осей, давай скомбинируем свойства justify-content и align-items и посмотрим как работает центрирование различных значений свойства flex-direction.
Со значением row, элементы выравниваются вдоль горизонтальной оси, column - вертикальной.
Свойство 5: align-self
Свойство align-self позволяет вручную управлять выравниванием конкретного элемента.
Оно переопределяет значение свойства align-items. Все значения точно такие же как и у align-items, кроме auto, которое установлено по умолчанию и означает что надо выравнивать как указано у контейнера.
#container { align-items: flex-start; } .square#one { align-self: center; } // только этот элемент будет центрированДавайте посмотрим как это будет выглядеть. Присвоим align-self для первых двух элементов, а для остальных применим align-items: center и flex-direction: row.
Заключение
Конечно это был только обзор основных свойств, но их уже достаточно чтобы решить большинство проблем с лейаутом.
www.css-tricks.ru
Работа с Flexbox в гифках / Блог компании Everyday Tools / Хабр
Flexbox так и напрашивается на то, чтобы создавать по нему визуальные шпаргалки. Сегодня мы предлагаем вам перевод статьи Скотта Домеса «Как работает Flexbox – в больших, ярких анимированных гифках», своего рода наглядное пособие.
Flexbox обещает избавить нас от недостатков стандартного CSS (таких как вертикальное выравнивание). Следует признать, что Flexbox действительно справляется с поставленной задачей. Однако освоение этой новой модели может вызвать некоторые затруднения. Попробуем продемонстрировать, как функционирует Flexbox, позволяя создавать более совершенные макеты страниц. Основной принцип Flexbox — гибкие и интуитивные макеты страниц. Это достигается за счет того, что контейнеры сами равномерно распределяют свои дочерние элементы — включая их размер и пространство между ними.
Идея, в принципе, неплохая. Но давайте посмотрим, как это реализуется на практике. В этой статье мы рассмотрим 5 основных свойств Flexbox. Мы опишем, для чего они нужны, как вы можете их использовать, и к каким результатам они в итоге приводят.
Свойство № 1: Display: Flex
Вот наша интернет-страница в качестве примера:
У вас есть четыре разноцветных блока различных размеров в сером контейнере. На данный момент для каждого блока по умолчанию определено display: block. Каждый квадрат таким образом занимает всю ширину своей линии.
Чтобы начать работу с Flexbox, вам надо превратить свой контейнер в flex-контейнер. Это делается следующим образом:
#container { display: flex; }
На первый взгляд изменения незначительны — ваши блоки отображаются теперь в инлайновом виде, только и всего. Между делом вы сделали большой шаг. Вы создали для своих блоков так называемый flex-контекст.Теперь вы можете размещать их в этом контексте — это намного проще, чем при работе с традиционным CSS.
Свойство № 2: Flex Direction
У flexbox-контейнера есть две оси: главная ось и перпендикулярная ось, которые по умолчанию выглядят следующим образом:
По умолчанию flex-элементы выстраиваются вдоль главной оси, слева направо. Поэтому ваши квадраты по умолчанию будут располагаться в горизонтальный ряд, как только вы примените display: flex. Flex-direction, однако, позволяет вращать главную ось.
#container { display: flex; flex-direction: column; }
Следует подчеркнуть: flex-direction: column не располагает квадраты на перпендикулярной оси вместо главной оси. Это свойство меняет направление самой главной оси из горизонтального в вертикальное.
У flex-direction есть и другие значения: row-reverse и column-reverse.
Свойство № 3: Justify Content
Justify Content задаёт выравнивание элементов по главной оси.Здесь различие главной и перпендикулярной осей следует рассмотреть подробнее. Сначала вернемся к flex-direction: row.
#container { display: flex; flex-direction: row; justify-content: flex-start; } У Justify Content есть пять значений:- Flex-start
- Flex-end
- Center
- Space-between
- Space-around
Space-around и space-between наименее интуитивны. Space-between выравнивает элементы так, чтобы они располагались на одинаковом расстоянии относительно друг друга, но не относительно контейнера.
Space-around задает одинаковый отступ вокруг элемента со всех сторон. Это означает, что пространство между крайними квадратами и контейнером вдвое меньше, чем пространство между двумя квадратами (все отступы имеют одинаковую величину и не накладываются друг на друга, соответственно, промежуток между квадратами получается двойной).
И напоследок: помните, что justify-content выравнивает элементы вдоль главной оси, а flex-direction меняет положение самой главной оси. Это будет важно, когда вы перейдете к…
Свойство № 4: Align Items
Если вы освоили justify-content, align-items не вызовет у вас затруднений.В то время как justify-content применяется для главной оси, align-items задаёт выравнивание элементов по перпендикулярной оси.
Зададим для flex-direction изначальное значение row, чтобы оси выглядели следующим образом.
Затем перейдем к командам align-items.
- flex-start
- flex-end
- center
- stretch
- baseline
Следующие две несколько отличаются.
При заданном значении stretch элементы занимают всё свободное пространство по перпендикулярной оси. Если задано baseline, основания тегов абзаца выравниваются.
(Для align-items важно следующее: при значении stretch надо задать высоту квадратов автоматически, иначе она будет переопределять ширину.)
Что касается baseline, имейте в виду: если вы убираете теги абзаца, то будут выравниваться основания квадратов, как в примере:
Чтобы лучше продемонстрировать функционирование главной и перпендикулярной осей, скомбинируем justify-content и align-items и посмотрим, как значение center влияет на каждую из команд flex-direction:
При row квадраты выравниваются вдоль горизонтальной главной оси. При column они располагаются вдоль вертикальной главной оси.
Даже если квадраты центрированы и вертикально и горизонтально в обоих случаях, эти две команды не взаимозаменяемы!
Свойство № 5: Align Self
Align Self позволяет вручную управлять выравниванием одного конкретного элемента.Это свойство аннулирует значения align-items для выбранного квадрата. Все свойства — те же, но по умолчанию выставляется auto, при котором значения аналогичны align-items контейнера.
#container { align-items: flex-start; } .square#one { align-self: center; } // Only this square will be centered. Давайте посмотрим, как это будет выглядеть. Вы применяете align-self к двум квадратам, а для остальных применяете align-items: center и flex-direction: row.
Заключение
Хотя мы только поверхностно затронули работу с Flexbox, рассмотренные команды позволят вам осуществлять большинство базовых выравниваний и вертикальное выравнивание элементов.Спасибо за внимание!
habr.com
html - Основа Flex 100% в столбце flexbox: полная высота в Firefox, а не в Chrome
Кажется, это ошибка в Chrome. Подобно тем, которые описаны здесь (выпуск 428049) и, возможно, связаны с (вопрос 346275).
Это говорит:
- Browsers are supposed to resolve percentages on the flex item child, *if* its flex-basis is definite. - Gecko is *always* resolving percentages regardless of the flex-basis. - Chrome is *never* resolving percentages, regardless of the flex-basis.В общем случае Chrome не разрешает проценты высот на дочернем элементе flex (даже если сам ребенок является гибким элементом), в то время как все остальные браузеры делают.
Это можно продемонстрировать в нижеприведенном фрагменте: (Fiddle here)
* { box-sizing: border-box; margin: 0; padding: 0; } div.wrap { height: 120px; width: 240px; margin: 0px 12px; border: 1px solid blue; float: left; display: flex; flex-direction: column; } div.parent { flex: 0 0 100%; border: 1px solid green; display: flex; flex-direction: column; } div.item { flex: 0 0 100%; border: 1px solid red; } <div> <div>a</div> <div>b</div> <div>c</div> </div> <div> <div> <div>a</div> <div>b</div> <div>c</div> </div> </div>Второй div должен показывать то же поведение, что и первое. Другие браузеры (IE11, Edge, FF39) показывают это правильно. Хром здесь не работает и не корректно разрешает div.item. Для его родителя требуется фиксированная высота, без которой она использует min-content как ее высоту и, следовательно, не переполняется.
В то время как в первом div, div.item правильно разрешены и переполняются соответственно. Это связано с тем, что у родителя есть фиксированная высота (т.е. div.wrap)
Возможное решение:
В качестве обходного решения, если вы уверены, что внутри вашей обертки есть только два элемента (p и div), вы можете дать им высоту 50%. Вы должны предоставить height:50% вашему .column-parent. Для Chrome требуется фиксированная высота, как показано выше.
Затем все будет работать так, как вам нужно.
Демо-скрипт: http://jsfiddle.net/abhitalks/kqncm65n/
Соответствующий CSS:
.wrapper > p { flex: 0 0 50%; } .column-parent { flex: 1 0 auto; height: 50%; display: flex; flex-direction: column; border: 2px solid blue; } .column-child { flex: 0 0 100%; border: 2px solid red; }PS: Также существуют различия в способе jsfiddle и plnkr render. Я не знаю почему, но иногда я получаю разные результаты!
qaru.site
CSS Grid и Flexbox: сравнение на практике
Оригинал: http://tutorialzine.com/2017/03/css-grid-vs-flexbox/Перевод: Влад Мержевич
Ещё недавно макет для всех страниц HTML верстался с помощью таблиц, float и других свойств CSS, которые не очень хорошо подходят для стилизации сложных веб-страниц.
Затем появился Flexbox — режим вёрстки, который был специально разработан для создания надёжных адаптивных страниц. Flexbox упростил правильное выравнивание элементов и их содержимого и теперь является предпочтительной системой CSS для большинства веб-разработчиков.
Но теперь у нас есть новый претендент на титул за звание «лучшей системы для вёрстки макетов HTML» (название титула ещё в процессе разработки»). Это CSS Grid и в ближайшее время эта система будет доступна в браузерах Firefox 52 и Chrome 57, а вскоре, как я надеюсь, и в других браузерах.
Базовый макет
Чтобы понять, каково это — создавать макеты на каждой системе, мы сделаем одну и ту же HTML-страницу дважды — один раз с помощью Flexbox, а затем на CSS Grid. Вы можете скачать оба проекта отсюда или проверить их в этой демонстрационной версии.
Уменьшенный макет веб-страницы
Дизайн довольно простой — он состоит из выровненного по центру контейнера, внутри которого у нас есть шапка, основной раздел, боковая панель и подвал. Вот главные «испытания», которые мы должны провести, сохраняя CSS и HTML по возможности чистыми:
- Разместить четыре основных раздела макета.
- Сделать страницу адаптивной (боковая панель опускается ниже основного содержимого на маленьких экранах).
- Выровнять содержимое шапки — навигация слева, кнопка справа.
Как вы можете видеть, ради сравнения мы оставили всё максимально простым. Начнём с первого испытания.
Испытание 1. Размещение разделов страницы
Решение на Flexbox
Добавляем display: flex к контейнеру и задаём направление дочерних элементов по вертикали. Это позиционирует все разделы друг под другом.
.container { display: flex; flex-direction: column; }Теперь нам нужно сделать так, чтобы основной раздел и боковая панель располагались рядом. Поскольку flex-контейнеры обычно однонаправлены, нам нужно добавить дополнительный элемент.
<header></header> <div> <section></section> <aside></aside> </div> <footer></footer>Затем мы устанавливаем этому элементу display: flex и flex-direction с противоположным направлением.
.main-and-sidebar-wrapper { display: flex; flex-direction: row; }Последний шаг — задать размеры основного раздела и боковой панели. Мы хотим, чтобы основное содержимое было в три раза шире боковой панели, что несложно сделать с помощью flex или процентов.
.main { flex: 3; margin-right: 60px; } .sidebar { flex: 1; }Как вы можете видеть, Flexbox сделал всё хорошо, но нам кроме этого понадобилось довольно много свойств CSS плюс дополнительный элемент HTML. Давайте посмотрим, как будет работать CSS Grid.
Решение на CSS Grid
Существует несколько вариантов использования CSS Grid, но мы воспользуемся синтаксисом grid-template-areas, как наиболее подходящего для наших целей.
Сперва мы определим четыре grid-area, по одному на каждый раздел страницы:
<header></header> <!-- Обратите внимание, что в этот раз нет дополнительных элементов --> <section></section> <aside></aside> <footer></footer> header { grid-area: header; } .main { grid-area: main; } .sidebar { grid-area: sidebar; } footer { grid-area: footer; }Теперь мы можем настроить нашу сетку и определить расположение каждой области. Вначале код может показаться довольно сложным, но как только вы познакомитесь с системой сетки, он становится проще для понимания.
.container { display: grid; grid-template-columns: 3fr 1fr; grid-template-areas: "header header" "main sidebar" "footer footer"; grid-gap: 60px; }Вот и всё! Наш макет теперь будет соответствовать указанной выше структуре и мы его настроили так, что нам не придётся иметь дело с margin или padding.
Испытание 2. Делаем страницу адаптивной
Решение на Flexbox
Выполнение этого шага строго связано с предыдущим. Для решения на Flexbox нам придётся изменить flex-direction и отрегулировать margin.
@media (max-width: 600px) { .main-and-sidebar-wrapper { flex-direction: column; } .main { margin-right: 0; margin-bottom: 60px; } }Наша страница довольно простая, поэтому в медиа-запросе мало работы, но в более сложном макете придётся много чего переделывать.
Решение на CSS Grid
Поскольку мы уже определили grid-areas, нам просто нужно переопределить их порядок в медиа-запросе. Мы можем использовать ту же настройку колонок.
@media (max-width: 600px) { .container { grid-template-areas: "header header" "main main" "sidebar sidebar" "footer footer"; } }Или можем переопределить весь макет с нуля, если считаем, что это решение чище.
@media (max-width: 600px) { .container { grid-template-columns: 1fr; grid-template-areas: "header" "main" "sidebar" "footer"; } }Испытание 3. Выравнивание компонентов шапки
Наша шапка включает некоторые ссылки навигации и кнопку. Мы хотим, чтобы навигация была слева, а кнопка справа. Ссылки внутри навигации должны быть выровнены относительно друг друга.
Решение на Flexbox
<header> <nav> <li><a href="#"><h2>Logo</h2></a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </nav> <button>Button</button> </header>Мы уже делали похожий макет на Flexbox в одной из наших старых статей — Простейший способ создания адаптивной шапки. Техника довольно простая:
header { display: flex; justify-content: space-between; }Теперь список навигации и кнопка выровнены правильно. Осталось только разместить пункты внутри <nav> по горизонтали. Проще это сделать с помощью display: inline-block, но поскольку мы собираемся целиком использовать Flexbox, применим решение только для него:
header nav { display: flex; align-items: baseline; }Только две строки! Совсем неплохо. Давайте посмотрим, как с этим справится CSS Grid.
Решение на CSS Grid
Чтобы разделить навигацию и кнопку, мы должны добавить display: grid к header и настроить двухколоночную сетку. Нам также понадобятся две дополнительные строки в CSS, чтобы позиционировать всё на соответствующих границах.
header{ display: grid; grid-template-columns: 1fr 1fr; } header nav { justify-self: start; } header button { justify-self: end; }Что касается ссылок в одну строку внутри навигации, у нас не получилось сделать это корректно с CSS Grid. Вот как выглядит наша лучшая попытка:
Ссылки строчные, но они не могут быть выровнены правильно, поскольку не существует варианта baseline, как у align-items. Мы также должны определить ещё одну вложенную сетку.
header nav { display: grid; grid-template-columns: auto 1fr 1fr; align-items: end; }Понятно, что CSS Grid не справилась с этой частью макета, но это и не удивительно — основное внимание уделяется выравниванию контейнеров, а не содержимому внутри них. Эта система не для нанесения последних штрихов.
Выводы
Если вы прочитали статью целиком (а это отличная работа!), выводы не должны вас удивить. На деле нет лучшей системы — и Flexbox и CSS Grid хороши по своему и должны использоваться совместно, а не как альтернатива друг другу.
Для тех из вас, кто перепрыгнул непосредственно к выводам этой статьи (не волнуйтесь, мы тоже так делаем), вот краткий итог сравнения:
- CSS Grid отлично подходит для создания большой картины. Эта система облегчает управление макетом страницы и даже может иметь дело с нестандартным и асимметричным дизайном.
- Flexbox отлично подходит для выравнивания содержимого внутри элементов. Используйте эту систему для размещения мелких деталей дизайна.
- Используйте CSS Grid для двумерных макетов (строк И колонок).
- Flexbox лучше работает только в одном измерении (со строками ИЛИ с колонками).
- Нет причин применять только CSS Grid или только Flexbox. Изучайте их и используйте совместно.
htmlbook.ru
