Display html flex: A Complete Guide to Flexbox | CSS-Tricks

Leave a Comment / Html / By /

Содержание

flex-direction | WebReference

Свойство flex-direction задаёт направление основных осей в контейнере и тем самым определяет положение флексов в контейнере. На само направление также влияет значение атрибута dir у контейнера.

Краткая информация

Значение по умолчаниюrow
НаследуетсяНет
ПрименяетсяК флекс-контейнеру
АнимируетсяНет

Синтаксис

flex-direction: row | row-reverse | column | column-reverse
Синтаксис
ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*		Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

row
Главная ось направлена так же, как и ориентация текста, по умолчанию слева направо. Если значение dir задано как rtl, то направление оси идёт справа налево.
row-reverse
Похоже на значение row, но меняются местами начальная и конечная точки и главная ось направлена справа налево. Если значение dir задано как rtl, то направление оси идёт слева направо.
column
Главная ось располагается вертикально и направлена сверху вниз.
column-reverse

Главная ось располагается вертикально, но меняется положение начальной и конечной точек и ось направлена снизу вверх.

Песочница

row row-reversecolumncolumn-reverse

div {
  display: flex;
  flex-direction: {{ playgroundValue }};
}

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>flex-direction</title> <style> .flex-row { padding: 0; margin: 0; list-style: none; display: flex; flex-direction: row-reverse; } </style> </head> <body> <ul> <li><img src=»image/thumb1.jpg» alt=»»></li> <li><img src=»image/thumb2.jpg» alt=»»></li> <li><img src=»image/thumb3.jpg» alt=»»></li> </ul> </body> </html>

Объектная модель

Объект.style.flexDirection

Примечание

Safari до версии 9 поддерживает свойство -webkit-flex-direction.

Спецификация

СпецификацияСтатус
CSS Flexible Box Layout Module Level 1Возможная рекомендация
Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

11132912.16.1928
4.42812.17.19.2
Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

Флексы

См. также

  • Адаптивный макет на флексбоксах
  • Вложенные флекс-контейнеры
  • Направление флексбоксов
  • Свойства flex-контейнера

Flex-сетка — Бесплатный HTML-курс

Для того, чтобы перейти к практике, нам нужно рассмотреть ещё один важный вопрос: как создавать блоки и ячейки. Большая часть вёрстки будет заключаться именно в создании и комбинации блоков. Например вот так:

Red

Green

Blue

Любой блок по-умолчанию занимает 100% ширину своего контейнера. Это стандартное поведение, которое описывается свойством display: block. У блочных тэгов DIV, P, h2 и т.д. это свойство определено изначально.

Строчные тэги, например SPAN, B, I и т.д. описаны как display: inline. В отличие от блочных они не создают перенос строки.

Но что делать если блоки нужно разместить друг возле друга? Сейчас для этого в основном применяется т.н. flexbox-модель, или по простому flex. Она работает очень просто.

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

Первая ячейка

Вторая

И третья

<div>
    <div>Первая ячейка</div>
    <div>Вторая</div>
    <div>И третья</div>
</div>

Класс b-flex объявлен так:

.b-flex { display: flex; }
Все примеры ты можешь проверять в Berry Builder.

Каждая ячейка flex-сетки, также может являться контейнером для вложенных элементов.

100

200

300

Вторая

И третья

<div>
    <div>
        <div>100</div>
        <div>200</div>
        <div>300</div>
    </div>
    
    <div>Вторая</div>
    <div>И третья</div>
</div>

Отступы

Отступы бывают внешние (margin) и внутренние (padding). Обычно они задаются в пикселях. В Berry CSS за них отвечают классы marXX и padXX.

Первая ячейка

Вторая

И третья

<div>
    <div>Первая ячейка</div>
    <div>Вторая</div>
    <div>И третья</div>
</div>

Здесь мы задаём для внешнего отступа 20px, а внутри ячейки будет отступ в 10px. Это соответствует таким css-классам:

.mar20 { margin: 20px; }
.pad10 { padding: 10px; }

Отступы можно задать и более точечно — указать сторону: top, right, bottom, left. В Berry для этого используются суффиксы:

-t, -r, -b, -l, -tb (top и bottom), -rl (right и left).

.mar20-t  { margin-top: 20px; }
.mar20-r  { margin-right: 20px; }
.mar20-b  { margin-bottom: 20px; }
.mar20-l  { margin-left: 20px; }
.mar20-tb { margin-top: 20px; margin-bottom: 20px; }
.mar20-rl { margin-right: 20px; margin-left: 20px; }

Ширина

Как правило у ячейки нужно задать ширину. Ширина может задаваться в абсолютных величинах — пикселях, и относительных — процентах. Поскольку современная вёрстка адаптивная, то почти всегда используются проценты. В сочетании с поведением flexbox, они прекрасно адаптируются к любому экрану.

Классы ширины wXX, где XX — процент, либо wYYpx, где YY — пиксели.

Например

.w20  { width: 20%; }
.w50px  { width: 50px; }

Первая ячейка 20%

Вторая 30%

И третья 40%

<div>
    <div>Первая ячейка 20%</div>
    <div>Вторая 30%</div>
    <div>И третья 40%</div>
</div>

Также часто применяется 12-колоночная сетка — это когда ширина рассчитывается как часть от 12-ти колонок. Например 6 колонок — будет соответствовать 50% ширины. Для таких случаев в Berry CSS предусмотрены классы wXXcol, где XX — число колонок. Ширина рассчитывается автоматически простым делением. Эти классы можно комбинировать с «обычными».

Первая ячейка 2 колонки

Вторая 4 колонки

И третья 6 колонок

<div>
    <div>Первая ячейка 2 колонки</div>
    <div>Вторая 4 колонки</div>
    <div>И третья 6 колонок</div>
</div>

Поведение flex-сетки

Возможностей у flexbox намного больше, поэтому мы можем контролировать её поведение с помощью CSS.

Вначале рассмотрим базовые принципы.

В первую очередь стоит отметить, что классы ширины ячейки, носят «рекомендательный» характер. Если содержимое ячеек будет большим, то браузер изменит их ширину так, чтобы оптимально заполнить всё доступное пространство. То есть когда суммарная ширина ячеек превысит 100%, браузер их отобразит как посчитает нужным.

50%

50%

50%

<div>
    <div>50%</div>
    <div>50%</div>
    <div>50%</div>
</div>

Сумма ячеек 150% и мы ожидаем, что браузер перенесёт последнюю ячейку, но этого не происходит. Именно так и работает flex-сетка.

А чтобы всё-таки разрешить перенос ячеек нужно явно это указать. Для этого используется класс flex-wrap:

.flex-wrap { flex-wrap: wrap; }

50%

50%

50%

<div>
    <div>50%</div>
    <div>50%</div>
    <div>50%</div>
</div>
На самом деле wrap в основном используется в адаптивном дизайне, но его мы будем рассматривать позже.

«Резиновая» сетка

В подавляющем большинстве случаев, вёрстка требует «резиновой» сетки — это когда крайние ячейки прижимаются к краям контейнера. В Berry CSS для этого используется класс flex, который задан так:

.flex  { 
    display: flex;
    justify-content: space-between;
    align-items: stretch;
 }

Посмотри разницу.

<div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>
<div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

Класс flex прижимает ячейки к краю ( align-items: stretch), а пустое пространство распределяет равномерно ( justify-content: space-between).

В подавляющем большинстве случаев ты будешь работать именно в таком варианте, поскольку именно в нём браузер будет стремиться наиболее оптимально распределить ячейки.

Ещё пример

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

<div>
    <div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div >
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

То есть работа с flex достаточно проста.

  • Задаётся контейнер с классом flex.
  • Задаются ячейки и указываются классы ширины.
  • Задаются отступы ячеек и их прочее оформление.

Задания

Посмотри на странице flexbox другие свойства и примеры поведения сетки. Запоминать все классы ну нужно, но ты должен знать в каких пределах может настраиваться flex-сетка.

Попробуй сверстать (не подглядывая!) вот такой блок. Например ты уже работаешь верстальщиком и дизайнер скинул тебе вот такой макет. Переведи его в HTML. (Картинку можешь взять любую. Я использую эту.)

Котики в интернете — это неиссякаемый источник умиления

Подсказка: Здесь используются классы
  • flex
  • flex-wrap
  • w60
  • w40
  • pad40-tb
  • t-georgia
  • t-italic
  • t-pink600
  • t-gray600
Решение
<div>
    <div>
        <h2>Котики</h2>
        <p>Котики в интернете - это неиссякаемый источник умиления</p>
    </div>
    
    <div>
        <img src="https://live.staticflickr.com/3849/15063747768_1e63529953_w.jpg" alt="Котик" title="">
    </div>
</div>

Flex · Начальная загрузка

Быстро управляйте макетом, выравниванием и размером столбцов сетки, навигацией, компонентами и многим другим с помощью полного набора гибких утилит flexbox. Для более сложных реализаций может потребоваться пользовательский CSS.

Включить гибкое поведение

Применить утилиты display для создания контейнера flexbox и преобразования прямых дочерних элементов в flex-элементы. Flex-контейнеры и элементы могут быть изменены с помощью дополнительных flex-свойств.

Я флексбокс-контейнер!

 
Я контейнер flexbox!

Я встроенный контейнер flexbox!

 
Я встроенный контейнер flexbox!

Адаптивные варианты также существуют для .d-flex и .d-inline-flex .

  • .д-флекс
  • .d-inline-flex
  • .d-sm-flex
  • .d-sm-inline-flex
  • .d-md-flex
  • .d-md-inline-flex
  • .d-lg-flex
  • . d-lg-inline-flex
  • .d-xl-flex
  • .d-xl-inline-flex

Направление

Установите направление flex-элементов в flex-контейнере с помощью утилит направления. В большинстве случаев вы можете опустить здесь горизонтальный класс, поскольку по умолчанию в браузере используется строка . Однако вы можете столкнуться с ситуациями, когда вам нужно явно установить это значение (например, адаптивные макеты).

Используйте .flex-row , чтобы установить горизонтальное направление (браузер по умолчанию), или .flex-row-reverse , чтобы начать горизонтальное направление с противоположной стороны.

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

 <дел>
  
Элемент Flex 1

  
Элемент Flex 2

  
Элемент Flex 3
<дел>
Элемент Flex 1
Элемент Flex 2
Элемент Flex 3

Используйте . flex-column , чтобы задать вертикальное направление, или .flex-column-reverse , чтобы начать вертикальное направление с противоположной стороны.

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

 <дел>
  
Элемент Flex 1

  
Элемент Flex 2

  
Элемент Flex 3
<дел>
Элемент Flex 1
Элемент Flex 2
Элемент Flex 3

Адаптивные варианты также существуют для flex-direction .

  • .flex-ряд
  • .flex-ряд-реверс
  • .flex-столбец
  • .flex-колонка-реверс
  • .flex-см-строка
  • .flex-sm-row-reverse
  • .flex-sm-столбец
  • .flex-sm-column-reverse
  • .flex-MD-строка
  • . flex-md-row-reverse
  • .flex-MD-столбец
  • .flex-md-column-reverse
  • .flex-lg-строка
  • .flex-lg-строка-реверс
  • .flex-lg-столбец
  • .flex-lg-колонка-реверс
  • .flex-xl-ряд
  • .flex-xl-ряд-реверс
  • .flex-xl-столбец
  • .flex-xl-столбец-реверс

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

Используйте утилиты justify-content в контейнерах flexbox для изменения выравнивания flex-элементов по главной оси (ось x для начала, ось y, если flex-direction: column ). Выберите из start (браузер по умолчанию), end , center , между или вокруг .

Flex item

Flex item

Flex item

Flex item

Flex Item

Flex Item

Flex Item

Искусство

Искусство

Изгиб Элемент

Элемент сгибания

Item

Elem.

 <дел>...
<дел>...
<дел>...
<дел>...

...

Адаптивные варианты также существуют для justify-content .

  • .justify-content-start
  • .justify-content-end
  • .justify-content-center
  • .выравнивание содержимого между
  • .justify-content-around
  • .justify-content-sm-start
  • .justify-content-sm-end
  • .justify-content-sm-центр
  • .justify-content-sm-между
  • .justify-content-sm-around
  • .justify-content-md-start
  • .justify-content-md-end
  • .justify-content-md-центр
  • .justify-content-md-между
  • .justify-content-md- вокруг
  • . justify-content-lg-start
  • .justify-content-lg-end
  • .justify-content-lg-центр
  • .justify-content-lg-между
  • .justify-content-lg-around
  • .justify-content-xl-start
  • .justify-content-xl-end
  • .justify-content-xl-центр
  • .justify-content-xl-между
  • .justify-content-xl-вокруг

Выравнивание элементов

Используйте утилиты align-items в контейнерах flexbox для изменения выравнивания flex-элементов по поперечной оси (ось Y для начала, ось X, если flex-direction: столбец ). Выберите из start , end , center , baseline или stretch (браузер по умолчанию).

Flex Item

Flex Item

Flex Item

Elect Item

Elex Item

Elex Item

Искусство

Elect

Elemp элемент

Гибкий элемент

Гибкий элемент

 <дел>. ..
<дел>...
<дел>...
<дел>...

...

Адаптивные варианты также существуют для align-items .

  • .align-items-start
  • .align-items-end
  • .align-items-center
  • .align-items-baseline
  • .align-items-stretch
  • .align-items-sm-start
  • .align-items-sm-end
  • .align-items-sm-center
  • .align-items-sm-baseline
  • .align-items-sm-stretch
  • .align-items-md-start
  • .align-items-md-end
  • .align-items-md-center
  • .align-items-md-baseline
  • .align-items-md-stretch
  • .align-items-lg-start
  • .align-items-lg-end
  • . align-items-lg-center
  • .align-items-lg-baseline
  • .align-items-lg-stretch
  • .align-items-xl-start
  • .align-items-xl-end
  • .align-items-xl-center
  • .align-items-xl-базовый уровень
  • .align-items-xl-stretch

Самовыравнивание

Используйте утилиты align-self для элементов flexbox для индивидуального изменения их выравнивания по поперечной оси (ось Y для начала, ось X, если flex-direction: столбец ). Выберите один из тех же параметров, что и align-items : start , end , center , baseline или stretch (браузер по умолчанию).

Flex-элемент

Выровненный гибкий элемент

Flex-элемент

Flex Item

Выравнившийся сгибанный элемент

Flex Item

Elex Item

Выровненное изгиб

Elect Item

Elect Item

Выравнированный изгиб

Элемент

Elem. Гибкий элемент

 
Выровненный гибкий элемент


Выровненный гибкий элемент


Выровненный гибкий элемент


Выровненный гибкий элемент


Выровненный гибкий элемент

Адаптивные варианты также существуют для align-self .

  • .align-self-start
  • .align-self-end
  • .align-self-center
  • .align-self-базовый уровень
  • .align-self-stretch
  • .align-self-sm-start
  • .align-self-sm-end
  • .align-self-sm-центр
  • .align-self-sm-baseline
  • .align-self-sm-stretch
  • .align-self-md-start
  • .align-self-md-end
  • .align-self-md-центр
  • .align-self-md-базовый уровень
  • . align-self-md-stretch
  • .align-self-lg-start
  • .align-self-lg-end
  • .align-self-lg-центр
  • .align-self-lg-базовый уровень
  • .align-self-lg-stretch
  • .align-self-xl-start
  • .align-self-xl-end
  • .align-self-xl-центр
  • .align-self-xl-базовый уровень
  • .align-self-xl-stretch

Заполнение

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

Flex-элемент с большим количеством контента

Flex-элемент

Flex-элемент

 <дел>
  
Элемент Flex с большим количеством контента

  
Элемент Flex

  
Элемент Flex

Адаптивные варианты также существуют для flex-fill .

  • .flex-fill
  • .flex-sm-fill
  • .flex-md-fill
  • .flex-lg-fill
  • .flex-xl-заполнение

Увеличение и уменьшение

Используйте утилиты .flex-grow-* , чтобы переключить способность гибкого элемента увеличиваться, чтобы заполнить доступное пространство. В приведенном ниже примере элементы .flex-grow-1 используют все доступное пространство, в то время как оставшимся двум элементам гибкости предоставляется необходимое пространство.

Гибкий элемент

Гибкий элемент

Третий гибкий элемент

 <дел>
  
Элемент Flex

  
Элемент Flex

  
Третий гибкий элемент

Используйте утилиты .flex-shrink-* для переключения способности гибкого элемента сжиматься, если это необходимо. В приведенном ниже примере второй гибкий элемент с . flex-shrink-1 принудительно переносит свое содержимое на новую строку, «сжимаясь», чтобы освободить место для предыдущего гибкого элемента с .w-100 .

Гибкий элемент

Гибкий элемент

 <дел>
  
Элемент Flex

  
Элемент Flex