Гибкая компоновка коробки
С появлением CSS Flexible Box многие кошмары веб-дизайнеров 1 были разрешены. Один из самых хакерских, вертикальное выравнивание. Теперь это возможно даже на неизвестных высотах .
«Два десятилетия взлома макетов подходят к концу. Может быть, не завтра, но скоро и на всю оставшуюся жизнь».
- Легендарный CSS Эрик Мейер на W3Conf 2013
Flexible Box (или вкратце Flexbox) - это новая система макетов, специально разработанная для макетов. В спецификации говорится :
Flex-макет внешне похож на блочный макет. В нем отсутствуют многие более сложные тексто- или документо-ориентированные свойства, которые можно использовать в макете блока, такие как плавающие элементы и столбцы. Взамен он получает простые и мощные инструменты для распределения пространства и выравнивания контента способами, которые часто требуются веб-приложениям и сложным веб-страницам.
Как это может помочь в этом случае? Ну что ж, посмотрим.
Выровненные по вертикали столбцы
Используя Twitter Bootstrap, у нас есть .rowнесколько .col-*s. Все, что нам нужно сделать, - это отобразить желаемое значение .row2 в виде поля гибкого контейнера, а затем выровнять все его гибкие элементы (столбцы) по align-itemsсвойствам по вертикали .
ПРИМЕР ЗДЕСЬ (Пожалуйста, внимательно прочитайте комментарии)
<div class="container">
<div class="row vertical-align"> <!--
^-- Additional class -->
<div class="col-xs-6"> ... </div>
<div class="col-xs-6"> ... </div>
</div>
</div>
.vertical-align {
display: flex;
align-items: center;
}
Выход
Цветная область отображает отступы столбцов.
Уточнение по align-items: center
8.3 Выравнивание по оси: align-itemsсвойство
Элементы Flex могут быть выровнены по поперечной оси текущей линии контейнера Flex, аналогично, justify-contentно в перпендикулярном направлении. align-itemsустанавливает выравнивание по умолчанию для всех элементов flex-контейнера, включая анонимные элементы flex .
align-items: center;
По значению центра поле поля гибкого элемента центрируется по поперечной оси в пределах линии.
Большая тревога
Важное примечание № 1: Twitter Bootstrap не определяет widthстолбцы столбцов на очень маленьких устройствах, если вы не назначите один из .col-xs-#классов столбцам.
Поэтому в этой конкретной демонстрации я использовал .col-xs-*классы для правильного отображения столбцов в мобильном режиме, поскольку он widthявно указывает столбец.
Но в качестве альтернативы вы можете отключить макет Flexbox, просто переключившись display: flex;на display: block;экран определенного размера. Например:
/* Extra small devices (767px and down) */
@media (max-width: 767px) {
.row.vertical-align {
display: block; /* Turn off the flexible box layout */
}
}
Или вы можете указать .vertical-align только для определенных размеров экрана, например, так:
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
.row.vertical-align {
display: flex;
align-items: center;
}
}
В этом случае, я бы с @KevinNelson «s подход .
Важное примечание № 2: префиксы поставщиков опущены из-за краткости. Синтаксис Flexbox был изменен в течение времени. Новый письменный синтаксис не будет работать в старых версиях веб-браузеров (но не такой старый, как Internet Explorer 9! Flexbox поддерживается в Internet Explorer 10 и более поздних версиях).
Это означает, что вы также должны использовать свойства с префиксом поставщика, такие как display: -webkit-boxи так далее, в рабочем режиме.
Если вы нажмете «Toggle Compiled View» в демоверсии , вы увидите префиксную версию объявлений CSS (благодаря Autoprefixer ).
Полноразмерные столбцы с вертикальным выравниванием содержимого
Как вы видели в предыдущей демонстрации , столбцы (элементы flex) больше не так высоки, как их контейнер (коробка flex-контейнера..row Элемент).
Это из-за использования centerзначения для align-itemsсвойства. Значение по умолчанию - stretchэлементы могут заполнить всю высоту родительского элемента.
Чтобы это исправить, вы также можете добавить display: flex;к столбцам:
ПРИМЕР ЗДЕСЬ (опять же, обратите внимание на комментарии)
.vertical-align {
display: flex;
flex-direction: row;
}
.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
display: flex;
align-items: center; /* Align the flex-items vertically */
justify-content: center; /* Optional, to align inner flex-items
horizontally within the column */
}
Выход
Цветная область отображает отступы столбцов.
И последнее, но не менее важное : обратите внимание, что приведенные здесь демонстрации и фрагменты кода предназначены для того, чтобы дать вам другую идею, предоставить современный подход к достижению цели. Пожалуйста, обратите внимание на раздел « Big Alert », если вы собираетесь использовать этот подход в реальных веб-сайтах или приложениях.
Для дальнейшего чтения, включая поддержку браузера, эти ресурсы будут полезны:
1. Вертикально выровняйте изображение внутри div с отзывчивой высотой.
2. Лучше использовать дополнительный класс, чтобы не изменять настройку Twitter Bootstrap по умолчанию .row.
div, нет текста внутри, что-то вроде этого jsfiddle.net/corinem/Aj9H9, но в этом примере я не использую bootstrap