Выравнивание с помощью флексбоксов


Содержание

Центрирование в CSS с помощью Flexbox

Центрирование элементов на странице, особенно вертикальное центрирование, в прошлом было сложно сделать с CSS, и нам приходилось делать ряд хаков. К счастью, Flexbox все упрощает, и теперь мы можем сосредоточить нашу энергию проектирования на проблемах более высокого уровня.

Ниже приведено очень простое руководство по центрированию элементов с использованием Flexbox.

Горизонтальное центрирование

Начнем с div, который содержит два абзаца, которые мы хотим центрировать по горизонтали на одной оси. Это так же просто, как использование свойства justify-content со значением центра на контейнере:

Вертикальное центрирование

Flexbox действительно мощный инструмент, когда нам также нужно центрировать элементы по вертикали. Вот наш пример, но с гибкими элементами также центрированы по вертикали:

Вертикальное центрирование на всей странице

Если вы хотите поместить элемент по центру страницы, это может быть немного сложнее, потому что элементы не имеющие высоты и ширины будут располагаться только по вертикали в соответствии с высотой их контейнера. Это означает, что сам контейнер должен быть такой же высоты, как и сама страница. Это достаточно просто сделать, используя 100vh — 100% высоты окна просмотра.

Как работает CSS Flexbox: наглядное введение в систему компоновки элементов на веб-странице

Flexbox призван спасти нас от неприятных моментов чистого CSS (например, от вертикального выравнивания), и он отлично справляется со своей задачей. Но разобраться в принципах его работы порой бывает сложно, особенно, если вы новичок.

Основная задача Flexbox — сделать слои гибкими, а работу с ними — интуитивно понятными. Для достижения этой цели он позволяет контейнерам самим решать, как обращаться со своими дочерними элементами, в том числе изменять их размер и расстояние между ними.

Звучит неплохо, но давайте посмотрим, так ли оно гладко на практике. В этой статье мы изучим 9 самых популярных свойств Flexbox, разберемся, что они делают, и как они на самом деле работают.

Display: Flex

Вот пример страницы:

У нас есть 4 разноцветных div’а разных размеров, которые находятся внутри серого div’а. У каждого div’а есть свойство display: block . Поэтому каждый квадрат занимает всю ширину строки.

Чтобы начать работать с Flexbox, нам нужно сделать наш контейнер flex-контейнером. Делается это так:

Вроде бы ничего особо и не изменилось — div’ы всего лишь встали в ряд. Но вы сделали что-то действительно мощное. Вы дали вашим квадратам классное свойство, называемое “flex-контекст”.

Flex Direction

У flex-контейнера есть две оси: главная ось и перпендикулярная ей.

По умолчанию все предметы располагаются вдоль главной оси: слева направо. Поэтому наши квадраты выровнялись в линию, когда мы применили display: flex . Однако flex-direction позволяет вращать главную ось.

Важно заметить, что flex-direction: column не выравнивает квадраты по оси, перпендикулярной главной. Главная ось сама меняет свое расположение и теперь направлена сверху вниз.

Полное руководство по Flexbox

Введение

Модуль разметки Flexbox ( от английского Flexible Box – гибкий блок ), находящийся на данный момент на этапе « Возможная рекомендация » стандартизации W3C ( W3C Candidate Recommendation ) нацелен на обеспечение более эффективного способа разметки, выравнивания и распределения места между элементами в контейнере, даже если их размер неизвестен и/или определяется динамически ( вот почему его назвали «гибкий» ).

Основная идея, стоящая за гибкой разметкой – это наделить контейнер способностью изменять высоту/ширину ( и порядок ) его элементов для оптимального заполнения доступного пространства ( в основном для поддержки всех видов и размеров экранов ).

Flex -контейнер растягивает элементы, чтобы заполнить свободное пространство или сжимает их, чтобы предотвратить выход за границы.

Что наиболее важно, разметка Flexbox не зависит от направления, в противоположность обычным разметкам ( блокам, которые ориентированы вертикально и строчным элементам, располагающимся горизонтально ).

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

Примечание : разметка Flexbox лучше всего подходит для компонентов приложения и небольших макетов, в то время как разметка с помощью grid предназначена для верстки более масштабных макетов.

Основные понятия и термины

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

Если обычная разметка основывается на направлениях блоков и строчных элементов, то flex -разметка базируется на направлениях flex -потока. Пожалуйста, обратите внимание на приведенную ниже схему из спецификации, объясняющую основную идею, стоящую за flex -разметкой:

В основном, элементы будут размещены либо вдоль главной оси ( от точки main-start до main-end ), либо вдоль поперечной оси ( от точки cross-start до cross-end ):

  • main axis – это главная ось flex -контейнера, вдоль которой размещаются flex -элементы. Будьте осторожны, она не обязательно располагается горизонтально, ее положение зависит от свойства flex-direction ( смотрите ниже );
  • main-start | main-end — flex -элементы располагаются внутри контейнера, начиная от точки main-start , и доходят до точки main-end ;
  • main size – это ширина или высота flex -элемента, в зависимости от основной величины. В качестве значения свойства main size может быть установлено значение ширины или высоты;
  • cross axis – поперечная ось, перпендикулярная главной оси. Ее направление зависит от направления главной оси.
  • cross-start | cross-end – flex -строки заполняются элементами и размещаются в контейнере, начиная со стороны cross-start по направлению к стороне cross-end ;
  • cross size – ширина или высота flex -элемента, в зависимости от выбранной размерности. Свойство может иметь значение либо ширины, либо высоты поперечной размерности.

Свойства родительского класса (flex-контейнера)

display

Это свойство определяет flex -контейнер: строчной или блоковый, в зависимости от установленного значения. Также оно разрешает flex -контекст для всех его прямых потомков:

Отметим, что CSS -столбцы ( columns ) не имеют эффекта во flex -контейнере.

flex-direction

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

Представьте, что flex -элементы в первую очередь располагаются либо в горизонтальных, либо вертикальных колонках:

  • row ( по умолчанию ): слева направо для ltr; справа налево для rtl;
  • row-reverse : справа налево для in ltr; слева направо для rtl;
  • column : так же как row , но сверху вниз;
  • column-reverse : так же как row-reverse , но снизу вверх.

flex-wrap

По умолчанию flex -элементы попытаются втиснуться в одну линию. Вы можете изменить это, и обернуть элементы как нужно с помощью этого свойства. Здесь играет роль и направление, в котором располагаются новые линии:

  • nowrap ( по умолчанию ): однострочный / слева направо для ltr; справа налево для rtl ;
  • wrap : многострочный / слева направо для ltr ; справа налево для rtl ;
  • wrap-reverse : многострочный / справа налево для ltr ; слева направо для rtl .

flex-flow (применяется к родительскому элементу flex-контейнера)

Это сокращенная форма свойств flex-direction и flex-wrap , которые вместе определяют главную и поперечную оси flex -контейнера. По умолчанию задается значение row nowrap :

justify-content

Данное свойство задает выравнивание вдоль главной оси. Это помогает распределить лишнее свободное пространство, в том случае, если все flex -элементы в строке негибкие, либо гибкие, но достигли своего максимального размера. Также данное свойство позволяет получить контроль над выравниваем элементов, когда они выходят за границы строки:

  • flex-start (по умолчанию): элементы выравниваются к началу строки;
  • flex-end : элементы выравниваются к концу строки;
  • center : элементы выравниваются по центру строки;
  • space-between : элементы распределяются в строке равномерно: первый элемент располагается в начале строки, последний – в конце;
  • space-around : элементы распределяются в строке равномерно с одинаковым расстоянием между собой.

align-items

Это свойство определяет то, как по умолчанию располагаются flex -элементы относительно поперечной оси на текущей строке. Его можно считать версией justify-content для поперечной оси ( перпендикулярной главной ):

  • flex-start : граница элементов cross-start располагается на линии cross-start ;
  • flex-end : граница элементов cross-start располагается на линии cross-end ;
  • center : элементы располагаются по центру поперечной оси;
  • baseline : выравнивание элементов происходит согласно базовой линии;
  • stretch ( по умолчанию ): элементы растягиваются для того, чтобы заполнить контейнер ( с учетом значений min-width/max-width ).

align-content

Это свойство позволяет выравнивать строки внутри flex -контейнера, когда есть свободное место на поперечной оси, что схоже с тем, как свойство justify-content выравнивает отдельные элементы относительно главной оси.

Примечание : это свойство не будет работать, если есть только одна строка flex -элементов:

  • flex-start : строки располагаются в начале контейнера;
  • flex-end : строки располагаются в конце контейнера;
  • center : строки располагаются посередине контейнера;
  • space-between : строки распределяются равномерно; первая строка – в начале контейнера, а последняя – в конце;
  • space-around : строки размещены равномерно на одинаковом расстоянии друг от друга;
  • stretch ( по умолчанию ): строки растягиваются, чтобы заполнить оставшееся пространство.

Свойства дочерних элементов

(flex-элементы)

Order

По умолчанию, flex -элементы располагаются в порядке, заданном источником. Однако свойство order контролирует порядок, в котором элементы появляются во flex -контейнере:

flex-grow

Это свойство позволяет flex -элементу « разрастаться » в случае необходимости. Оно принимает безразмерное значение, служащее в качестве пропорции. Это значение определяет, какой объем доступного пространства внутри flex -контейнера может занять элемент.

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

Отрицательные числа недопустимы.

flex-shrink

Это свойство определяет для flex -элементов возможность сжиматься в случае необходимости:

Отрицательные числа недопустимы.

flex-basis

Это свойство определяет размер элементов по умолчанию перед распределением оставшегося пространства:

Это свойство является сокращенной формой для комбинации свойств flex-grow, flex-shrink и flex-basis . Второй и третий параметры ( flex-shrink и flex-basis ) задаются опционально. Значения по умолчанию: 0 1 auto :

align-self

Это свойство позволяет переопределить выравнивание, заданное по умолчанию ( или определенное свойством align-items ) для отдельных flex -элементов.

Доступные значения вы можете найти в описании свойства align-items :

Обратите внимание, что float , clear и vertical-align не работают с flex -элементами.

Примеры

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

Этот пример основывается на том факте, что свойство margin , установленное в значение auto , поглощает лишнее пространство. Поэтому такое задание отступа выравнивает элемент ровно по центру от обеих осей.

Теперь давайте воспользуемся еще несколькими свойствами. Предположим, что у нас есть список из 6 элементов, все они фиксированного размера ( для эстетичности ), но с возможностью автоматического заполнения.

Мы хотим, чтобы они были красиво, равномерно распределены по горизонтальной оси таким образом, чтобы при изменении размера окна браузера, все смотрелось хорошо ( без использования медиа запросов ):

Готово! Все остальное — уже вопросы оформления. Здесь располагается демонстрация этого примера. Перейдите по ссылке и попробуйте изменить размер окна, чтобы посмотреть, что произойдет:

Давайте попробуем еще кое-что. Допустим, у нас на самом верху веб-сайта находится меню навигации, выровненное вправо, но мы хотим, чтобы на экранах среднего размера оно располагалось по центру, а для устройств с маленьким экраном – располагалось в один столбец. Все достаточно просто:

Давайте попробуем сделать еще лучше, поиграв с « гибкостью » flex -элементов. Как насчет мобильной разметки в три столбца с заголовком и подвалом во всю ширину? И с выводом элементов, независимым от порядка, заданного исходным кодом:

Использование префиксов для flexbox

Flexbox требует использования вендорных префиксов для возможности поддержки большинством браузеров. Это включает в себя не только использование вендорных префиксов перед свойствами, но и полностью разные названия свойств и значений.

А все потому, что спецификация flexbox менялась с течением времени, создав « old » ( старую ), « tweener «(промежуточную), и «new» (новую) версии.

Возможно, наилучший выход в этой ситуации — это писать код, используя новый (и финальный) синтаксис и пропускать CSS через Autoprefixer , который очень хорошо обрабатывает откаты к предыдущим версиям.

В качестве альтернативы, ниже приведен Sass метод @mixin для помощи с некоторыми префиксами, который к тому же раскрывает идею того, какие действия должны быть предприняты:

Поддержка браузерами

Разделена « версиями » flexbox на:

  • ( new ) – означает поддержку последнего синтаксиса из спецификации (например, display: flex; ).
  • ( tweener ) – означает поддержку дополнительного неофициального синтаксиса от 2011 года (например, display: flexbox; ).
  • ( old ) – означает поддержку старого синтаксиса от 2009 года (например, display: box; ).
Chrome Safari Firefox Opera IE Android iOS
21+ (new)
20- (old)
3.1+ (old)
6.1+ (new)
2-21 (old)
22+ (new)
12.1+ (new) 10 (tweener)
11+ (new)
2.1+ (old)
4.4+ (new)
3.2+ (old)
7.1+ (new)

Браузер Blackberry версии 10+ поддерживает новый синтаксис.

Данная публикация представляет собой перевод статьи « A Complete Guide to Flexbox » , подготовленной дружной командой проекта Интернет-технологии.ру

Полное руководство по Flexbox

Предисловие

Модуль Flexbox Layout (Flexible Box) направлен на то чтобы предоставить более эффективный способ расположения, выравнивания и распределения свободного пространства между элементами в контейнере, даже когда их размер заранее неизвестен и/или динамичен (поэтому слово «flex»).

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

Самое главное, что Flexbox это направленный агностик в отличии от обычных раскладок (блоков основанных на вертикальном позиционировании и строковых элементов основанных на горизонтальном позиционировании). Не смотря на то что они достаточно хорошо работают, им не хватает гибкости для поддержки больших или сложных приложений (особенно когда речь идёт об изменении ориентации, изменении размеров, растягивании, сжатии и т. д.).

Примечание. Flexbox больше подходит для компонентов приложения и небольших макетов, тогда как CSS Grid предназначен для более масштабных макетов.

Основы и терминология

Так как Flexbox — это целый модуль, а не отдельное свойство, он содержит множество различных вещей, включая целый набор свойств. Некоторые из них предназначены для установки их контейнеру (родительский элемент, известный как «flex-контейнер»), а другие должны устанавливаться дочерним элементам (известные как «flex-элементы»).

Если обычная система компоновки основана на блочных и строковых направлениях, то Flexbox основан на «flex-flow направлениях». Пожалуйста взгляните на этот рисунок из спецификации, объясняющий основную идею Flexbox.

В основном элементы будут располагаться вдоль основной оси (от main-start к main-end ) или попереченой оси (от cross-start к cross-end ).

  • main axis — это основная ось flex-контейнера, вдоль которой расположены flex-элементы. Берегитесь того, что это не обязательно горизонтальная ось; Она зависит от свойства flex-direction;
  • main-start | main-end — flex-элементы размещаются внутри контейнера, начиная с main-start и заканчивая main-end ;
  • main size — ширина или высота flex-элемента, в зависимости направления основной оси;
  • cross axis — это ось перпендикулярная основной оси, которая называется «поперечной» осью. Её направление зависит от направления основной оси;
  • cross-start | cross-end — — flex-элементы размещаются внутри контейнера, начиная с cross-start и заканчивая cross-end ;
  • cross size — ширина или высота flex-элемента, в зависимости направления поперечной оси;

Вёрстка с помощью CSS Flexbox

В этой статье познакомимся с технологией CSS Flexbox, предназначенной для создания гибких макетов веб-страниц.

Назначение CSS Flexbox

CSS Flexbox предназначен для создания гибких макетов. С помощью этой технологии можно очень просто и гибко расставить элементы в контейнере, распределить доступное пространство между ними, и выровнять их тем или иным способом даже если они не имеют конкретных размеров.

CSS Flexbox позволяет создать адаптивный дизайн намного проще, чем с использованием Float и позиционирования.

Flexbox можно использовать как для CSS разметки целой страницы, так и её отдельных блоков.

Поддержка CSS Flexbox браузерами

CSS Flexbox поддерживается всеми используемые на сегодняшний момент современными браузерами (с использованием префиксов: IE10+, Edge12+, Firefox 2+, Chrome 4+, Safari 3.1+, Opera 12.1+, iOS Safari 3.2, Opera mini, Android 2.1+, Blackberry 7+).

Основы CSS Flexbox

Создание CSS разметки с помощью Flexbox начинается с установки необходимому HTML элементу CSS-свойства display со значением flex или flex-inline .

После этого данный элемент становится flex-контейнером , а все его непосредственные дочерние элементы flex-элементами . При этом когда мы говорим о flexbox то подразумеваем только элемент с display:flex или display:flex-inline и все элементы непосредственно расположенные в нём. Т.е. в CSS Flexbox всего 2 типа элементов: flex-контейнер и flex-элемент.

Структура flexbox сетки

По умолчанию flex-элементы во flex-контейнере занимают всю его высоту.

Значение flex или flex-inline определяет то, как flex-контейнер будет представлен на странице. Если его необходимо отобразить в виде блока , то используйте значение flex . Если элемент необходимо представить как строку , то используйте значение flex-inline . В этом случае он будет занимать столько места странице, сколько необходимо для отображения его элементов.

Устройство flex-контейнера. Направление осей

На рисунке представлена схема устройства flex-контейнера:

Направление расположение flex-элементы в flex-контейнере определяется посредством осей.

В CSS Flexbox имеются две оси. Первая ось называется главной (по умолчанию она направлена слева направо). Вторая — поперечная (по умолчанию направлена сверху вниз), она всегда перпендикулярно главной .

По умолчанию элементы во flex-контейнере располагаются вдоль направления главной оси (т.е. слева направо) на одной линии.

Направление главной оси можно изменить, осуществляется это с помощью CSS-свойства flex-direction .

С помощью этого свойства можно сделать так, чтобы flex-элементы располагались не рядами (rows), а колонками (columns).

CSS Flexbox — Расположение элементов при установке свойству flex-direction значения column, а flex-wrap — wrap

Илон Маск рекомендует:  Что такое код pdf_begin_page

По умолчанию flex-элементы не переносятся на новую линию, даже когда им не хватает места в текущей линии. Они просто выходят за его пределы.

Расположение элементов в контейнере по умолчанию (flex-элементы, которым не хватает места во flex-контейнере, вылезают за его пределы)

Но это можно изменить. Разрешить перенос flex-элементов на новые линии осуществляется с помощью установки flex-контейнеру CSS свойства flex-wrap со значением wrap или wrap-reverse .

Значения wrap и wrap-reverse CSS-свойства flex-wrap определяют направление поперечной оси .

Свойства flex-direction и flex-wrap можно указать с помощью универсального CSS свойства flex-flow :

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

Во Flexbox выравнивание элементов внутри контейнера осуществляется по двум направлениям (осям).

Выравнивание flex-элементов по направлению главной оси

Выравнивание элементов вдоль основной оси осуществляется с помощью CSS свойства justify-content :

Варианты выравнивания flex-элементов вдоль главной оси

Выравнивание flex-элементов вдоль поперечной оси

Выравнивание flex-элементов во flex-контейнере по направлению поперечной оси осуществляется с помощью CSS-свойства align-items :

Варианты выравнивания flex-элементов вдоль поперечной оси

Выравнивание линий flex-контейнера

CSS Flexbox позволяет выравнивать не только сами flex-элементы, но и линии на которых они расположены.

Варианты выравнивания линий flex-контейнера

Свойство align-content имеет смысл использовать только тогда, когда flex-элементы во flex-контейнере располагаются на нескольких линиях. Чтобы это произошло, необходимо, во-первых, чтобы ширина всех flex-элементов была больше ширины flex-контейнера, а во-вторых flex-контейнер должен иметь в качестве CSS-свойства flex-wrap значение wrap или wrap-reverse .

CSS-свойство align-self

Свойство align-self в отличие от предыдущих ( justify-content , align-items и align-content ) предназначено для flex-элементов. Оно позволяет изменить выравнивание flex-элемента вдоль направления поперечной оси. Свойство align-self может принимать такие же значения как align-items .

Как работает CSS свойство align-self

Изменение порядка следования flex-элементов

По умолчанию flex-элементы отображаются во flex-контейнере в том порядке, в котором они расположены в HTML коде. Для изменения порядка следования одних flex-элементов относительно других в CSS Flexbox можно использовать свойство order . Данное CSS свойство выстраивает flex-элементы во flex-контейнере в порядке возрастания их номеров.

Как работает CSS свойство order

Управление шириной flex-элемента

Во Flexbox есть несколько CSS свойств, определяющих то, какая ширина может быть у flex-элемента.

CSS-свойство flex-basis

Данное свойство предназначено для установления начальной ширины flex-элементу. Задавать значение ширины можно посредством различных единиц измерения, таких как px, %, em и др. По умолчанию данное свойство имеет значение auto (в этом случае ширина элемента будет рассчитываться автоматически на основании его содержимого).

Конечная ширина flex-элемента будет определяться в зависимости от значений CSS-свойств flex-grow и flex-shrink , которые установлены не только для этого элемента, но и для других flex-элементов этого flex-контейнера.

CSS-свойство flex-grow

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

Как работает CSS свойство flex-grow

В этом примере, если flex-элементы расположены на одной линии и в ней есть свободное пространство (600×(1-0,8)=120px):

  • к ширине элемента .flex-container_element-1 добавится 1/5 часть этого пространства (120×1/5=24px);
  • к ширине элемента .flex-container_element-2 добавится 4/5 части этого пространства (120×4/5=96px).

Другими словами, CSS свойство flex-grow позволяет не просто указать, что ширина flex-элемента может вырасти, но и задать, насколько эта величина может вырасти по отношению к другим элементам.

По умолчанию CSS свойство flex-grow имеет значение 0. Это означает, что flex-элемент не может расти (увеличивать свою ширину).

CSS-свойство flex-shrink

Данное свойство определяет, может ли ширина flex-элемента уменьшиться. Уменьшение ширины flex-элемента будет осуществляться только в том случае, если ширины линии будет не достаточно для отображения всех flex-элементов, расположенных в ней. Необходимая ширина рассчитывается на основании начальной ширины, который имеет каждый flex-элемент в ней.

Как работает CSS свойство flex-shrink

Ширина flex-контейнера 500px. Для отображения flex-элементов необходимо 600px. В итоге не хватает 100px. В этом примере уменьшаться могут 2 flex-элемента ( .flex-container_element-1 и .flex-container_element-2 ). Ширина первого flex-элемента .flex-container_element-1 в данном случае составит 300 – 1/4*100= 275px. Ширина второго flex-элемента .flex-container_element-2 в данном случае составит 300 – 3/4*100= 225px.

Значение по умолчанию:

Если вам необходимо запретить уменьшение ширины flex-элементу, то в качестве значения свойства flex-shrink необходимо указать число 0.

CSS-свойство flex

Для удобной установки flex-grow , flex-shrink и flex-basis можно использовать CSS свойство flex .

Значение по умолчанию:

Верстка макета страницы на CSS Flexbox

В этом разделе создадим простой адаптивный макет на Flexbox.

Структура макета будет состоять из 3 секций:

  • header (для вывода заголовка и основного меню);
  • main (для отображения основной части);
  • footer (для футера).

Основную часть (main) в свою очередь разделим ещё на 2 раздела (их позиционирование будем осуществлять с помощью CSS Flexbox). На больших экранах (>=992px) эти разделы выстроим горизонтально, а на остальных — вертикально ( max-width .

Для «превращения» блока во flex-контейнер будем использовать класс row-flex . Установку ширины каждому flex-элементу ( main_article и main_aside ) внутри flex-контейнера будем осуществлять с помощью CSS-свойства flex .

Макет веб-страницы на Flexbox

В качестве примера разметим посредством Flexbox ещё блок «Футер» и секцию раздела main-article «Интересненькое на сайте».

Секцию «Футер» разделим на 4 равные части (минимальная ширина одной части — 200px), а «Интересненькое на сайте» на 3 части (минимальная ширина одной части — 300px).

Флексбокс, часть 1

Рассмотрим основы нового механизма «гибкой» раскладки — флексбокс. Сначала потренируемся «на котиках» направлять оси флекс-контейнера, выравнивать и переносить флекс-элементы, а затем научимся простому применению флексбокса в реальных интерфейсах.

Флексбокс, display: flex [1/31]

Флексбокс — это первый CSS-механизм, предназначенный для построения сеток и создания сложных раскладок блоков.

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

Флексбокс задумывался для создания «гибких» раскладок и хранит много тонкостей и чудес, о которых мы поговорим в этой серии курсов. А пока начнём с простого. Как включить флексбокс?

Очень просто: нужно задать элементу свойство display: flex; . После этого происходит два события:

  1. Элемент с display: flex; превращается во «флекс-контейнер» и внутри него начинает происходить вся магия гибкой раскладки.
  2. Непосредственные потомки этого элемента превращаются во «флекс-элементы» и начинают играть по новым правилам.

Первое, что вы заметите после выполнения этого задания, это то, что блоки растянутся на всю высоту контейнера. Да, внутри флексбокса можно делать элементы одинаковой высоты!

Главная ось, flex-direction [2/31]

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

В привычной блочной модели направления «лево», «право», «верх» и «низ» неизменны. Но внутри флекс-контейнера эти понятия могут изменяться, потому что там можно изменять обычное направление потока.

Вместо направлений «лево» и «право» во флексбоксе используется понятие «главная ось». Поток флекс-элементов «течёт» вдоль главной оси от её начала к её концу.

По умолчанию главная ось направлена слева направо, но её можно разворачивать во всех направлениях с помощью свойства flex-direction , которое задаётся для флекс-контейнера. Значения свойства:

row — значение по умолчанию, главная ось направлена слево направо.

column — главная ось направлена сверху вниз.

row-reverse — главная ось направлена справа налево.

column-reverse — главная ось направлена снизу вверх.

Флекс-элементы всегда располагаются вдоль главной оси, независимо от её направления.

Для блока .room задайте направление главной оси:

  1. Цель 1 справа налево,
  2. Цель 2 сверху вниз,
  3. Цель 3 а затем снизу вверх.

Поперечная ось [3/31]

Вместо направлений «верх» и «низ» во флексбоксе используется понятие «поперечная ось». Вдоль этой оси рассчитывается высота элементов и работают «вертикальные» выравнивания.

Поперечная ось всегда перпендикулярна главной оси и поворачивается вместе с ней:

  • Если главная ось направлена горизонтально, то поперечная ось смотрит вниз.
  • Если главная ось направлена вертикально, то поперечная ось смотрит направо.

Это не совсем логичное поведение, к которому надо привыкнуть. Получается, что поперечная ось никогда не смотрит вверх или влево. А свойства для поворота поперечной оси нет.

Давайте посмотрим на поведение поперечной оси вживую.

Для блока .room задайте ещё раз направление главной оси:

  1. Цель 1 сверху вниз,
  2. Цель 2 справа налево,
  3. Цель 3 а затем слева направо.

Обращайте внимание на направление поперечной оси.

Распределение флекс-элементов, justify-content [4/31]

Вместо «горизонтального» выравнивания во флексбоксе используется свойство для распределения элементов вдоль главной оси — justify-content . Это свойство задаётся для флекс-контейнера.

Его значением по умолчанию является flex-start . При этом значении элементы располагаются у начала главной оси.

Чтобы элементы располагались по центру главной оси, нужно задать для justify-content значение center .

Давайте разместим коврики по центру комнаты.

  1. Цель 1 Задайте распределение флекс-элементов по центру главной оси в блоке .room .

В начале и в конце главной оси [5/31]

Чтобы флекс-элементы располагались в начале главной оси, свойству justify-content нужно задать значение flex-start . Оно же является и значением по умолчанию.

А значение flex-end расположит элементы в конце главной оси.

Обратите внимание, что justify-content: flex-end не меняет порядок элементов, как это происходит при изменении направления оси flex-direction: row-reverse . Элементы просто прижимаются к концу главной оси.

Давайте опробуем эти значения justify-content и разместим коврики в начале и в конце комнаты.

  1. Цель 1 В блоке .room-2 разверните главную ось справа налево.
  2. Цель 2 Обоим блокам задайте распределение элементов в начале главной оси,
  3. Цель 3 затем только первому блоку — в конце главной оси,
  4. Цель 4 и снова обоим блокам — в конце главной оси.

Равномерное распределение [6/31]

Помните ли вы режим горизонтального выравнивания «по ширине», когда текст распределялся в блоке равномерно, а края текста прижимались к краям блока? Совсем как в этом абзаце.

У флексбокса есть чем-то похожие значения justify-content , которые равномерно распределяют флекс-элементы вдоль главной оси:

space-between — расстояния между соседними элементами одинаковые, между элементами и краями флекс-контейнера отступов нет.

space-around — расстояния между соседними элементами одинаковые, между элементами и краями флекс-контейнера есть отступ, равный половине расстояния между соседними элементами.

Сейчас мы добавим третьего кота и поэкспериментируем с этими значениями justify-content .

А пока небольшой итог. Свойство justify-content управляет распределением элементов вдоль главной оси и имеет пять значений:

значение по умолчанию flex-start ,

  1. Цель 1 В каждый из блоков .room добавьте кота Семёна: блок с классами rug и simeon .
  2. Цель 2 Затем блоку .room-1 задайте равномерное распределение вдоль главной оси без отступов по краям,
  3. Цель 3 а блоку .room-2 — равномерное распределение с половинными отступами по краям.

Выравнивание флекс-элементов, align-items [7/31]

Вместо «вертикального» выравнивания во флексбоксе используется свойство для выравнивания элементов вдоль поперечной оси — align-items . Это свойство задаётся для флекс-контейнера.

Его значением по умолчанию является stretch . Именно благодаря этому значению флекс-элементы и растягиваются на всю «высоту» флекс-контейнера. Если флекс-элементам задана высота, то растягиваться они не будут.

Чтобы элементы выровнялись по центру поперечной оси, нужно задать для align-items значение center .

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

  1. Цель 1 Коврикам .rug задайте высоту 150px ,
  2. Цель 2 затем для блока .room задайте выравнивание флекс-элементов по центру поперечной оси,
  3. Цель 3 а после этого коврику Кекса .keks задайте высоту 250px .

В начале и в конце поперечной оси [8/31]

Чтобы расположить флекс-элементы в начале или в конце поперечной оси, нужно использовать значения flex-start и flex-end для свойства align-items .

Эти значения аналогичны значениям свойства justify-content , отличается только ось.

Проверим эти значения и разместим коврики сверху и снизу комнаты.

Для блока .room задайте выравнивание флекс-элементов:

  1. Цель 1 в начале поперечной оси,
  2. Цель 2 а затем в конце поперечной оси.

Выравнивание элементов по базовой линии [9/31]

Ещё одно значение свойства align-items — это baseline . Если задать его контейнеру, то флекс-элементы будут выравниваться по базовой линии текста в них. Эта воображаемая линия проходит по нижней части букв.

Если выровнять флекс-элементы по базовой линии, то они выстроятся так, чтобы текст в них был как бы на «одной строке».

Чтобы лучше понять поведение baseline , сравним его с другим значением — flex-start .

Мини-итог. Свойство align-items управляет выравниванием элементов вдоль поперечной оси и имеет пять значений:

значение по умолчанию stretch ,

  1. Цель 1 Для блока .room-1 задайте выравнивание флекс-элементов в начале поперечной оси,
  2. Цель 2 а для блока .room-2 выравнивание по базовой линии текста.

Эгоистичное выравнивание, align-self [10/31]

Распределение элементов по главной оси задаётся для всего флекс-контейнера и на все флекс-элементы действует одинаково. Задать какому-то элементу отличное от других распределение по главной оси нельзя. И это вполне логично, ведь тогда элементы будут «сталкиваться» друг с другом.

C поперечной осью всё проще. Можно сказать, что у каждого элемента она своя, и можно задавать им разное поперечное выравнивание. Для этого используется свойство align-self , которое задаётся для самих флекс-элементов, а не для флекс-контейнера.

У свойства align-self те же самые значения, что и у align-items .

  1. Цель 1 Для коврика Рудольфа .rudolf задайте выравнивание в начале поперечной оси,
  2. Цель 2 для Кекса .keks — в конце поперечной оси,
  3. Цель 3 а для Семёна .simeon — по центру оси center .

Выравнивание одного элемента по базовой линии [11/31]

Аналогично align-items для отдельного флекс-элемента можно задать и выравнивание по базовой линии с помощью align-self со значением baseline .

Давайте зададим выравнивание по базовой линии двум отдельным блокам.

Задайте выравнивание флекс-элементов по базовой линии текста:

  1. Цель 1 для коврика Семёна .text-simeon ,
  2. Цель 2 для коврика Кекса .text-keks .

Перенос флекс-элементов, flex-wrap [13/31]

Что будет, если флекс-элементов в контейнере станет больше, чем может уместиться в один ряд?

  • Они будут сжиматься до минимально возможной ширины.
  • Даже если им задать ширину явно, механизм флексбокса может её уменьшить.
  • Если они перестанут помещаться в контейнер и после уменьшения, то они выйдут за его пределы, но продолжат располагаться в один ряд.

Это чем-то похоже на поведение ячеек в таблице.

Такое поведение можно изменить свойством флекс-контейнера flex-wrap . По умолчанию оно имеет значение nowrap , то есть перенос флекс-элементов на новую строку запрещён.

Значение wrap разрешает перенос флекс-элементов на новую строку, если они не помещаются в контейнер.

Давайте посмотрим на практике, как оно работает.

  1. Цель 1 Коврикам .rug задайте ширину 120px ,
  2. Цель 2 затем в блок .room последним добавьте кота Массимо: блок с классами rug и massimo ,
  3. Цель 3 а после этого для .room задайте перенос флекс-элементов на новую строку.

Перенос в обратном порядке [14/31]

Если перенос флекс-элементов разрешён, то ряды элементов располагаются вдоль поперечной оси. Первый ряд располагается в начале поперечной оси, а последний в конце. Но так работает только значение wrap .

Если для flex-wrap задать значение wrap-reverse , то элементы будут переноситься, а ряды будут располагаться в обратном порядке: первый в конце поперечной оси, а последний в начале.

Давайте добавим в комнату ещё котиков и попробуем переносить их на новую строку в обратном поперечной оси направлению.

  1. Цель 1 Добавьте ещё двух котов: Марти — блок с классами rug и marty и Черныша — блок с классами rug и blacky ,
  2. Цель 2 затем для .room задайте перенос флекс-элементов на новую строку в обратном направлении wrap-reverse ,
  3. Цель 3 а потом задайте всем коврикам ширину 180px .

Выравнивание строк флекс-контейнера, align-content [15/31]

Вспомним свойство justify-content , которое управляет распределением флекс-элементов вдоль главной оси.

Есть очень похожее свойство align-content , которое управляет выравниванием рядов флекс-элементов вдоль поперечной оси. У этих свойств почти одинаковые значения:

и stretch , которое есть только у align-content и является значением по умолчанию.

Свойство align-content связано и со свойством align-items , которое управляет выравниванием флекс-элементов вдоль поперечной оси.

В чём разница между align-content и align-items , когда работает одно, а когда работает другое? Вот ответы:

Если есть только один ряд флекс-элементов, то работает align-items .

Если есть несколько рядов, то работает align-content .

Подчеркнём, что align-content влияет на ряды, а не на отдельные элементы.

В последней версии спецификации это поведение изменилось: теперь правильно, когда align-content выравнивает элементы в многострочном флекс-контейнере, даже если строка в контейнере единственная. Это изменение на момент окончания 2015 года применено только в браузерах Safari и Edge.

  1. Цель 1 Для .room-1 задайте align-items в начале поперечной оси,
  2. Цель 2 а для .room-2 — align-items в конце поперечной оси.
  3. Цель 3 Затем увеличьте ширину коврика .rug до 120px , чтобы в блоках стало два ряда элементов.

Смотрите, как выравнивание рядов переопределило выравнивание элементов.

align-content: stretch и align-items [16/31]

Ранее мы говорили, что как только во флекс-контейнере появляется несколько рядов элементов, вместо align-items начинает действовать свойство align-content .

В этом случае align-items не отключается полностью, а может влиять на отображение флекс-элементов в рядах.

Это происходит, когда мы используем для align-content значение по умолчанию — stretch . Оно растягивает ряды флекс-элементов, при этом оставшееся свободное место между ними делится поровну.

Отображение строк при align-content: stretch зависит от значения align-items :

  • Если у align-items задано значение stretch , то элементы в строках растягиваются на всю высоту своей строки.
  • Если значение отлично от stretch , то элементы в строках ужимаются под своё содержимое и выравниваются в строках в зависимости от значения align-items .

Давайте посмотрим на этот эффект вживую.

  1. Цель 1 Задайте .rug внутри .room-2 ширину 120px , чтобы там появилось два ряда.
  2. Цель 2 Для обеих комнат задайте align-items в начале оси,
  3. Цель 3 посередине оси,
  4. Цель 4 в конце оси.

align-content: не-stretch и align-items [17/31]

Значение align-items влияет на отображение рядов во флекс-контейнере, если у align-content задано значение stretch . В этом мы убедились в прошлом задании.

Есть ли похожее влияние на остальные значения align-content ? Нет.

Убедимся в этом на примере значения center , которое располагает ряды в середине поперечной оси так, что:

  • отступов между соседними рядами нет (но отступы самих элементов сохраняются),
  • расстояние между первым рядом и краем флекс-контейнера равно расстоянию между последним рядом и другим краем.
  1. Цель 1 Для .room-2 задайте выравнивание рядов по центру оси.
  2. Цель 2 Затем для обеих комнат задайте align-items в начале оси,
  3. Цель 3 и в конце оси.

Остальные значения align-content [18/31]

Остальные четыре значения свойства align-content аналогичны значениям свойства justify-content , отличается только ось:

flex-start располагает ряды в начале поперечной оси.

flex-end располагает ряды в конце поперечной оси.

space-between равномерно распределяет ряды вдоль поперечной оси, расстояния между соседними рядами одинаковые, отступов у краёв нет.

space-around равномерно распределяет ряды вдоль поперечной оси, расстояния между соседними рядами одинаковые, отступы у краёв равны половине расстояния между соседними рядами.

Напоследок небольшое резюме.

Свойство align-content — «гибридное». Мы переводим его как «выравнивание», но оно больше похоже на «распределение», justify-content , от которого оно позаимствовало два значения space-between и space-around .

Близость с «распределением» подчёркивает и отсутствие значения baseline — всё-таки свойство работает с рядами, а не с отдельными элементами.

От «выравниваний» же, align-items и align-self , это свойство получило значение по умолчанию stretch и возможность «растягивать» ряды по высоте.

  1. Цель 1 Для .room задайте выравнивание строк в начале оси,
  2. Цель 2 в конце оси,
  3. Цель 3 равномерное выравнивание без отступов по краям,
  4. Цель 4 равномерное выравнивание с половинными отступами по краям.

Порядковый номер флекс-элемента, order [19/31]

И ещё одно свойство, которое мы рассмотрим в этом курсе, — это order , порядковый номер флекс-элемента.

Это очень полезное свойство, так как с его помощью можно менять порядок следования флекс-элементов в потоке, не меняя HTML-код.

По умолчанию порядковый номер флекс-элементов равен 0 , а сортировка элементов производится по возрастанию номера.

Порядковый номер задаётся целым числом, положительным или отрицательным. Например:

Давайте попробуем перетасовать коврики с котиками с помощью свойства order .

  1. Цель 1 Для коврика Кекса .keks задайте порядковый номер -1 ,
  2. Цель 2 затем для коврика Семёна .simeon — порядковый номер -2 ,
  3. Цель 3 а для коврика Рудольфа .rudolf — номер 1 .

Идеальное центрирование, margin: auto [21/31]

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

Илон Маск рекомендует:  Как показать подсказки hints для элементов меню

Самый насущный вопрос, который можно легко и изящно решить с помощью флексбокса, — как отцентровать элемент по вертикали и горизонтали так, чтобы центровка сохранялась при изменении размеров элемента или контейнера.

Ответ прост: задать контейнеру раскладку флексбокса, а дочернему флекс-элементу margin: auto .

В этом случае флекс-элемент уменьшит свой размер под содержимое и отцентруется по вертикали и горизонтали.

Стоит обратить внимание на интересный момент. Если центруемых флекс-элементов в контейнере будет несколько, то отступы между ними будут равномерными. То есть будет происходить распределение элементов внутри флекс-контейнера чем-то похожее на justify-content: space-around .

Давайте проверим этот момент на примере карточки товара, в которой картинка центруется внутри блока.

  1. Цель 1 Блоку .pictures задайте раскладку флексбокса,
  2. Цель 2 а затем для блока .picture задайте margin: auto .
  3. Цель 3 Измените размер картинки .picture img на 40px ,
  4. Цель 4 а потом в HTML-редакторе добавьте ещё один блок .picture с такой же картинкой.

Идеальное центрирование, флекс-выравнивания [22/31]

А теперь давайте отцентруем элементы с помощью свойств флекс-контейнера без margin: auto на дочерних элементах.

Заметьте разницу между тем, как распределяются элементы при разных значениях свойства justify-content .

  1. Цель 1 У блоков .picture уберите margin: auto ,
  2. Цель 2 затем блоку .pictures задайте распределение флекс-элементов по центру главной оси
  3. Цель 3 и выравнивание по центру поперечной оси.
  4. Цель 4 Затем замените распределение по главной оси на space-around .

«Гибкое» меню [23/31]

Флексбокс полезен при создании блоков с дочерними элементами динамической длины. Хороший пример — меню.

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

Эту задачу можно попытаться решить, задав фиксированные отступы и ширину пунктам меню. Но такой способ не подойдёт, если количество пунктов меню или подписи внутри них будут изменяться.

И тут на помощь приходит флексбокс. Зададим меню раскладку флексбокса, пункты станут флекс-элементами. С помощью свойства распределения элементов justify-content добьёмся нужного результата.

  1. Цель 1 Блоку .menu задайте раскладку флексбокса,
  2. Цель 2 а затем равномерное распределение элементов по главной оси с половинными отступами по краям.

«Гибкое» меню, часть 2 [24/31]

Теперь можно запросто добавить в меню ещё один пункт или изменить ширину самого контейнера.

Отступы между пунктами меню будут «гибко» меняться, подстраиваясь под новые условия.

  1. Цель 1 В .menu между двумя div с текстом Рыба и Молоко добавьте ещё один div со ссылкой с текстом Сметана .
  2. Цель 2 Затем задайте меню ширину 80% .

«Гибкое» меню, часть 3 [25/31]

С помощью раскладки флексбокса можно также легко управлять порядком следования элементов, не изменяя при этом HTML-код.

Давайте заменим один из пунктов меню блоком с логотипом, а затем легко попереставляем его на разные места с помощью свойства order .

  1. Цель 1 Вырежьте блок .logo и вставьте его внутрь меню вместо div с текстом Сметана .
  2. Цель 2 Затем для .menu задайте центральное выравнивание элементов по поперечной оси.
  3. Цель 3 Блоку .logo задайте порядковый номер флекс-элемента -1 ,
  4. Цель 4 а потом 1 .

Вертикальный ряд иконок [26/31]

Давайте используем раскладку флексбокса ещё в одном примере.

Для начала выстроим два блока, идущих друг за другом, в ряд. Затем изменим порядок их отображения.

Заметьте, что флекс-элементами внутри флекс-контейнера становятся только прямые потомки, элементы первого уровня вложенности.

В нашем примере флекс-контейнер .post включает два флекс-элемента section и aside . Блоки внутри флекс-элементов ведут себя как обычно, флекс-поток их не затрагивает.

  1. Цель 1 Блоку .post задайте раскладку флексбокса,
  2. Цель 2 а затем для aside внутри .post задайте порядковый номер флекс-элемента -1 .

Вертикальный ряд иконок, часть 2 [27/31]

Флекс-элемент внутри флекс-контейнера можно также сделать флекс-контейнером.

Он будет одновременно вести себя и как флекс-элемент, то есть подчиняться правилам распределения и выравнивания своего родителя, и как самостоятельный флекс-контейнер. При этом его вложенные элементы первого уровня будут следовать только его флекс-правилам.

В нашем примере давайте сделаем блок с иконками социальных сетей вложенным флекс-контейнером, а его дочерние флекс-элементы распределим по всей высоте блока.

  1. Цель 1 Блоку .post aside задайте раскладку флексбокса,
  2. Цель 2 направление главной оси сверху вниз,
  3. Цель 3 равномерное распределение флекс-элементов по главной оси без отступов по краям,
  4. Цель 4 а затем внешний отступ справа 20px .

Вертикальный ряд иконок, часть 3 [28/31]

Теперь, если изменить высоту флекс-элемента section , то изменится и высота элемента aside . А так как aside сам является флекс-контейнером, то изменение его высоты перераспределит его дочерние флекс-элементы — ссылки с иконками.

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

Давайте проверим это, добавив ещё немного текста в блок.

  1. Цель 1 Раскомментируйте в разметке два параграфа внутри блока .post .

Сортировка элементов на CSS [29/31]

Интересного эффекта можно достичь, если скомбинировать флексбокс и трюк с селектором :checked

Приём заключается в следующем: с помощью селектора по выделению чекбокса можно управлять порядком флекс-элементов, изменяя направление главной оси с помощью flex-direction . Лучше всего эффект работает, когда направление главной оси меняется с «сверху вниз» на «снизу вверх».

При этом флекс-контейнер должен находиться в разметке на одном уровне с чекбоксом.

Таким образом реализуется сортировка на CSS, без использования JavaScript.

  1. Цель 1 Блоку .sort-list задайте раскладку флексбокса
  2. Цель 2 и направление главной оси сверху вниз.
  3. Цель 3 При выделенном состоянии чекбокса .input-sort для блока .sort-list задайте направление главной оси снизу вверх.

Переключайте чекбокс, чтобы сортировать элементы списка.

Блоки одинаковой высоты [30/31]

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

Надо учитывать, что содержимое блоков может быть разным и их высота может меняться.

В обычной блочной модели есть фундаментальный недостаток — соседние блоки ничего не знают друг о друге, поэтому их высоты нельзя «связать». Получается, что все «стандартные» варианты для решения этой задачи не работают:

float или inline-block не могут «связывать» высоты соседних блоков;

таблицы и CSS-таблицы позволяют делать ячейки одинаковой высоты, но появляются ограничения, связанные с расположением элементов в строках;

минимальная высота не подходит, так как какой-то из блоков всегда может стать выше остальных;

конечно, можно задать всем блокам фиксированную высоту, но это решение совсем не универсальное.

А с помощью флексбоксов эта проблема решается легко и изящно, ведь флекс-элементы по умолчанию растягиваются на всю высоту контейнера.

Попробуем починить раскладку на float с помощью флексбокса.

  1. Цель 1 Блоку .columns задайте раскладку флексбокса
  2. Цель 2 и перенос флекс-элементов на новую строку.

Испытание: сложные палитры [31/31]

Итак, вы подошли к финальному испытанию.

Вам предстоит снова собирать палитру. Да не одну!

На этот раз придётся воспользоваться всем изученным арсеналом свойств флексбокса. Также для прохождения может понадобиться повторение CSS-селекторов.

Этот курс — первая часть серии о флексбоксе. До встречи на следующих курсах. Продолжение следует!

Flexbox CSS — (Практика) #1

  • CSS / CSS3
  • Flexbox CSS
  • JavaScript
    • JavaScript с нуля
    • JS и Jquery
  • Уроки по 1С-Битрикс
    • Контент менеджер
      • Авторизация на сайте
      • Элементы управления
      • Работа с информацией
      • Управление структурой
    • Сайт на 1С-Битрикс
      • Создание landing page
  • Видео новости
  • Модули расширений
  • Расширения и плагины
    • Bootstrap

Дополнительное видео

ПОДПИСКА на УРОКИ

Flexbox CSS #1 — Практика выравнивания элементов

В текущем видео уроке разберем три основных свойства Flexbox CSS — display | justify-content | align-items . При помощи их можно выравнивать flex-элементы по горизонтали и вертикали.

Нам понадобится заготовка, можете ее скачать или набрать код самостоятельно.

Пробежимся по ее структуре заготовки. В index файле подключаю иконки через cdn, ниже подключаю файл стилей, а в теле body создан блок с классом dws-wrapper который служит оберткой всего контента. Файл стилей пустой, в папке img картинка на задний фон и изображение для примера.

Базовая разметка HTML

Начинаем как всегда с базовой разметки блоков. Нам понадобится контейнер, для него зададим класс img-box , в котором расположим следующие элементы. Изображение, заключаем в отдельный блок с классом img-wrapper , он будет для нее оберткой.

Для иконок сделаем UL, в нем четыре списка и в каждом расположим по ссылке.

Дописываем решетку в тег href , и подберем ряд иконок под нашу тематику.

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

На этом разметка HTML завершена, переходим к описанию стилей.

Описываем CSS стили

Частенько в комментариях задают мне вопросы, зачем я выравниваю блок обертку при помощи transform , таким способом.

Все довольно просто, при таком методе не нужно задавать контейнеру высоту, в то же время когда выравниваем через flexbox , нам она необходима для flex-контейнера . Без нее мы не сможем выровнять дочерние элементы по вертикали.

Давайте покажу, как это выглядит, к тому же закрепим пройденный материал.

Сейчас dws-wrapper является контейнером, притом обратите, какое пространство он занимает по высоте.

Теперь сделаем его flex-контейнером, применяем правило display: flex и в итоге, что мы видим, что наш единственный flex-элемент img-box прижался в верхний угол, и это хорошо видно, если зададим для него обводку.

В тоже время flex-контейнер dws-wrapper занял всю ширину окна браузера.

Далее применяем свойство justify-content со значением center и flex-элемент выровнялся по центру.

Затем при помощи свойства align-items пытаемся выровнять его по вертикали, но безрезультатно. Потому что, высота flex-контейнера, это все-то пространство, которое занимает его элемент и для того что бы его выровнять по вертикали, нужно соответственно задать высоту окна браузера height: 900px .

Вот таким образом мы добились выравнивания flex-элемента в нашем случае.

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

В данном примере оставлю второй вариант, так как все же урок по flexbox , только уберу задний фон /*background: #ccc;*/, который задавал для примера. Взамен ему сделаем фон body .

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

Переходим к оформлению блока img-box и наша задача иконки расположить с правой стороны картинки. Тут нам поможет flexbox . В начале урока я говорил, что блок с классом img-box будет flex-контейнером, и полагаю, многие из вас зададут вопрос, что у нас может быть два flex-контейнера? Да почему бы нет! Хоть десять их наштопайте, это допустимо документацией и мы можем делать их многоуровневые вложенности.

Задаем для блока с классом img-box правило display: flex . Далее что бы выровнять элементы по вертикали пропишем свойство align-items и уберем обводку.

Временно скрываем элементы, с которыми не работаем это блок UL и текст, что бы они нам не мешали. Приучайте себя с самого начала, убирать со странице те элементы, которые на данный момент не используете, это вас лишний раз не будет отвлекать от основной задачи, и сможете концентрироваться на определенном этапе работы.

Приступим к оформлению первого элемента, это блок с картинкой. Отбираем его .img-wrapper img и задаем ширину в 300 пик., добавляем серую обводку.

Так как этот элемент будет, перемещается по наведению, добавим плавность при помощи transition .

Ниже описываем стили по наведению. Делаем закругление углов при помощи transform , сдвинем блок по оси X влево на 80 пик. и добавим фильтр.

Основному блоку .img-box пропишем свойство overflow: hidden что бы картинка при смещение по наведению не выходила за его пределы. Затем добавим бордюр с левой стороны, что бы изображение не выглядела, как обрезанное.

Убираем у картинки с левой стороны бордюр.

Вы, наверняка обратили внимание, что вложенный блок с картинкой немного меньше по высоте, о чем говорит выступ бордюра и если задать контейнеру .img-box обводку outline: 1px solid orange это станет заметнее.

Что бы исправить такое дело, делаем блок .img-wrapper flex-контейнером и картинка занимает все его пространство блока.

Блок с картинкой оформлять закончи и временно пока закомментирую анимацию, что бы она нам не мешала.

Далее переходим к оформлению списков с иконками.

Отображаем блок UL , отбираем его .img-box ul , скрываем маркеры, добавлю плавность анимации, задаем фон, обводку в два пикселя и закруглим углы.

Затем оформляем списки Li , делаем отступы, выравниваем иконки по горизонтали, и делаем разделители.

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

Затем оформляем иконки по наведению.

В заключение делаем плавную анимацию, делаем перемещение блока UL по наведению на изображение.

Проверяем, как все работает в комплексе.

Для того что бы блок с иконкой ушел на задний план, для картинки задаем z-index .

Временно все закомментируем и приступим к оформлению текстовых блоков. Отображаем текст, и позиционируем его относительно контейнера .img-box . Временно overflow: hidden закомментирую.

Затем задаем полупрозрачный фон красного цвета, цвет текста делаем белый, позиционируем с права 100 пик, с низу 70 пик., задаем внутренние отступы и плавность анимации в 1s.

Оформляем текст параграфа.

Заголовку добавляем text-transform .

Теперь делаем анимацию, текст смещаем на 200 пик. при помощи transform по оси X в левую сторону и делаем невидимым.

По наведению на блок .img-box отображаем текст при помощи transform , и перемещаем в изначальное положение.

Затем отображаем весь закомментированный код, и смотрим, какой результат получили.

Не появились блоки с текстом, для них зададим приоритетность z-index в два.

В принципе, закончили данный пример, получили такого рода анимация.

Центрирование в CSS с помощью Flexbox

Центрирование элементов на странице, особенно вертикальное центрирование, в прошлом было сложно сделать с CSS, и нам приходилось делать ряд хаков. К счастью, Flexbox все упрощает, и теперь мы можем сосредоточить нашу энергию проектирования на проблемах более высокого уровня.

Ниже приведено очень простое руководство по центрированию элементов с использованием Flexbox.

Горизонтальное центрирование

Начнем с div, который содержит два абзаца, которые мы хотим центрировать по горизонтали на одной оси. Это так же просто, как использование свойства justify-content со значением центра на контейнере:

Вертикальное центрирование

Flexbox действительно мощный инструмент, когда нам также нужно центрировать элементы по вертикали. Вот наш пример, но с гибкими элементами также центрированы по вертикали:

Вертикальное центрирование на всей странице

Если вы хотите поместить элемент по центру страницы, это может быть немного сложнее, потому что элементы не имеющие высоты и ширины будут располагаться только по вертикали в соответствии с высотой их контейнера. Это означает, что сам контейнер должен быть такой же высоты, как и сама страница. Это достаточно просто сделать, используя 100vh — 100% высоты окна просмотра.

Про CSS

Flexbox

Flexbox — это новый способ располагать блоки на странице. Это технология, созданная именно для раскладки элементов, в отличие от float-ов. С помощью Flexbox можно легко выравнивать элементы по горизонтали и по вертикали, менять направление и порядок отображение элементов, растягивать блоки на всю высоту родителя или прибивать их к нижнему краю.

UPD от 02.02.2020: сделала удобную шпаргалку по флексбоксам, с живыми демками и описаниями из спеки: Flexbox cheatsheet.

В примерах используется только новый синтаксис. На момент написания статьи правильней всего они отображаются в Chrome. В Firefox работают частично, в Safari — вообще не работают.

Спецификация на английском есть тут: w3.org/TR/css3-flexbox.

Согласно сайту caniuse.com, Flexbox не поддерживается 8 и 9-м IE и Opera Mini, а в других браузерах поддерживаются не все свойства и/или требуются префиксы.

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

Для начала надо знать, что flex-элементы располагаются по осям. По умолчанию элементы располагаются по горизонтали — вдоль main axis — главной оси.

Так же следует иметь в виду, что при использовании Flexbox для внутренних блоков не работают float , clear и vertical-align , а так же свойства, задающие колонки в тексте.

Приготовим полигон для экспериментов:

Один родительский блок (желтый) и 5 дочерних.

Display: flex

И теперь родительскому элементу добавляем display: flex; . Внутренние div-ы выстраиваются в ряд (вдоль главной оси) колонками одинаковой высоты, независимо от содержимого.

display: flex; делает все дочерние элементы резиновыми — flex , а не инлайновыми или блочными, как было изначально.

Если родительский блок содержит картинки или текст без оберток, они становятся анонимными flex-элементами.

Свойство display для Flexbox может принимать два значения:

flex — ведёт себя как блочный элемент. При рассчете ширины блоков приоритет у раскладки (при недостаточной ширине блоков контент может вылезать за границы).

inline-flex — ведёт себя как инлайн-блочный. Приоритет у содержимого (контент растопыривает блоки до необходимой ширины, чтобы строчки, по возможности, поместились).

Flex-direction

Направление раскладки блоков управляется свойством flex-direction .

row — строка (значение по умолчанию); row-reverse — строка с элементами в обратном порядке; column — колонка; column-reverse — колонка с элементами в обратном порядке.

row и row-reverse

column и column-reverse

Flex-wrap

В одной строке может быть много блоков. Переносятся они или нет определяет свойство flex-wrap .

nowrap — блоки не переносятся (значение по умолчанию); wrap — блоки переносятся; wrap-reverse — блоки переносятся и располагаются в обратном порядке.

Для короткой записи свойств flex-direction и flex-wrap существует свойство: flex-flow .

Возможные значения: можно задавать оба свойства или только какое-то одно. Например:

flex-flow: column; flex-flow: wrap-reverse; flex-flow: column-reverse wrap;

Демо для row-reverse wrap-reverse :

Order

Для управления порядком блоков служит свойство order .

Возможные значения: числа. Чтобы поставить блок самым первым, задайте ему order: -1 :

Justify-content

Для выравнивания элементов есть несколько свойств: justify-content , align-items и align-self .

justify-content и align-items применяются к родительскому контейнеру, align-self — к дочерним.

justify-content отвечает за выравнивание по главной оси.

Возможные значения justify-content :

flex-start — элементы выравниваются от начала главной оси (значение по умолчанию); flex-end — элементы выравниваются от конца главной оси; center — элементы выравниваются по центру главной оси; space-between — элементы выравниваются по главной оси, распределяя свободное место между собой; space-around — элементы выравниваются по главной оси, распределяя свободное место вокруг себя.

flex-start и flex-end

Align-items

align-items отвечает за выравнивание по перпендикулярной оси.

Возможные значения align-items :

flex-start — элементы выравниваются от начала перпендикулярной оси; flex-end — элементы выравниваются от конца перпендикулярной оси; center — элементы выравниваются по центру; baseline — элементы выравниваются по базовой линии; stretch — элементы растягиваются, занимая все пространство по перпендикулярной оси (значение по умолчанию).

Align-self

align-self также отвечает за выравнивание по перпендикулярной оси, но задается отдельным flex-элементам.

Возможные значения align-self :

auto — значение по умолчанию. Означает, что элемент использует align-items родительского элемента; flex-start — элемент выравнивается от начала перпендикулярной оси; flex-end — элемент выравнивается от конца перпендикулярной оси; center — элемент выравнивается по центру; baseline — элемент выравнивается по базовой линии; stretch — элемент растягивается, занимая все пространство по высоте.

Align-content

Для управления выравниванием внутри многострочного flex-контейнера есть свойство align-content .

flex-start — элементы выравниваются от начала главной оси; flex-end — элементы выравниваются от конца главной оси; center — элементы выравниваются по центру главной оси; space-between — элементы выравниваются по главной оси, распределяя свободное место между собой; space-around — элементы выравниваются по главной оси, распределяя свободное место вокруг себя; stretch — элементы растягиваются, заполняя всю высоту (значение по умолчанию).

Ps: Некоторые штуки мне так и не удалось увидеть в действии, например, строчку flex-flow: column wrap или полную запись того же flex-direction: column; flex-wrap: wrap; .

Элементы стоят столбиком, но не переносятся:

Не срабатывает wrap при flex-direction: column; , хотя в спеке это выглядит вот так:

Думаю, со временем заработает.

UPD от 21.06.2014: всё работает, если задать блоку высоту. За подсказку спасибо SelenIT2.

ТИПИЧНЫЙ ВЕРСТАЛЬЩИК

Вся документация по свойству flex находится на официальном сайте.

Для быстрого изучения темы рекомендуем пройти 7-ми дневный марафон Flexbox CSS

display

inline-flex
русский
english

Многоцелевое свойство, которое определяет, как элемент должен быть показан в документе.

Применяется ко: всем элементам.

flex Элемент ведёт себя как блочный и выкладывает содержимое согласно флекс-модели. inline-flex Элемент ведёт себя как строчный и выкладывает содержимое согласно флекс-модели.

Илон Маск рекомендует:  Iis запуск веб сервера (startweb)

A flex container establishes a new flex formatting context for its contents. This is the same as establishing a block formatting context, except that flex layout is used instead of block layout. For example, floats do not intrude into the flex container, and the flex container’s margins do not collapse with the margins of its contents. Flex containers form a containing block for their contents exactly like block containers do. The overflow property applies to flex containers.

Flex containers are not block containers, and so some properties that were designed with the assumption of block layout don’t apply in the context of flex layout. In particular: If an element’s specified display is inline-flex, then its display property computes to flex in certain circumstances: the table in CSS 2.1 Section 9.7 is amended to contain an additional row, with inline-flex in the ‘Specified Value’ column and flex in the ‘Computed Value’ column.

Applies to: all elements.

flex This value causes an element to generate a block-level flex container box. inline-flex This value causes an element to generate an inline-level flex container box.

flex-direction

row-reverse
column
column-reverse
русский
english

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

Применяется к: flex контейнерам.

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

The flex-direction property specifies how flex items are placed in the flex container, by setting the direction of the flex container’s main axis. This determines the direction in which flex items are laid out.

Note: The reverse values do not reverse box ordering: like writing-mode and direction , they only change the direction of flow. Painting order, speech order, and sequential navigation orders are not affected.

Applies to: flex containers.

row The flex container’s main axis has the same orientation as the inline axis of the current writing mode. The main-start and main-end directions are equivalent to the inline-start and inline-end directions, respectively, of the current writing mode. row-reverse Same as row, except the main-start and main-end directions are swapped. column The flex container’s main axis has the same orientation as the block axis of the current writing mode. The main-start and main-end directions are equivalent to the block-start and block-end directions, respectively, of the current writing mode. column-reverse Same as column, except the main-start and main-end directions are swapped.

flex-wrap

nowrap
wrap-reverse
русский
english

Свойство flex-wrap Указывает, следует ли флексам располагаться в одну строку или можно занять несколько строк. Если перенос строк допускается, то свойство также позволяет контролировать направление, в котором выкладываются строки.

Применяется к: flex контейнерам.

Значение по умолчанию: nowrap.

nowrap Флексы выстраиваются в одну линию. wrap Флексы выстраиваются в несколько строк, их направление задаётся свойством flex-direction. wrap-reverse Флексы выстраиваются в несколько строк, в направлении, противоположном flex-direction.

The flex-wrap property controls whether the flex container is single-line or multi-line, and the direction of the cross-axis, which determines the direction new lines are stacked in.

For the values that are not wrap-reverse, the cross-start direction is equivalent to either the inline-start or block-start direction of the current writing mode (whichever is in the cross axis) and the cross-end direction is the opposite direction of cross-start. When flex-wrap is wrap-reverse, the cross-start and cross-end directions are swapped.

Applies to: flex containers.

Initial: nowrap.

nowrap The flex container is single-line. wrap The flex container is multi-line. wrap-reverse Same as wrap.

flex-flow

row nowrap
column-reverse
column wrap
row-reverse wrap-reverse
русский
english

Свойство flex-flow является сокращённым свойством для отдельных свойств flex-direction и flex-wrap.

Применяется к: flex контейнерам.

Значение по умолчанию: row nowrap.

The flex-flow property is a shorthand for setting the flex-direction and flex-wrap properties, which together define the flex container’s main and cross axes.

Applies to: flex containers.

Initial: row nowrap.

order

русский
english

Свойство order определяет порядок вывода флексов внутри флекс-контейнера. Элементы располагаются согласно значениям свойства order от меньшего к большему. При равных значениях order элементы выводятся в том порядке, в каком они появляются в исходном коде.

Применяется к: flex элементам.

Значение по умолчанию: 0.

The order property controls the order in which children of a flex container appear within the flex container, by assigning them to ordinal groups. It takes a single value, which specifies which ordinal group the flex item belongs to.

A flex container lays out its content in order-modified document order, starting from the lowest numbered ordinal group and going up. Items with the same ordinal group are laid out in the order they appear in the source document. This also affects the painting order , exactly as if the flex items were reordered in the source document.

Applies to: flex items.

Initial: 0.

justify-content

flex-start
flex-end
center
space-between
space-around
space-evenly
русский
english

Свойство justify-content определяет, как браузер распределяет пространство вокруг флекс-элементов вдоль главной оси контейнера. Это делается после того, как применяются размеры и автоматические отступы, за исключением ситуации, когда по крайней мере у одного элемента flex-grow больше нуля. При этом не остаётся никакого свободного пространства для манипулирования.

Применяется к: flex контейнерам.

Значение по умолчанию: flex-start.

flex-start Флексы прижаты к началу строки. flex-end Флексы прижаты к концу строки. center Флексы выравниваются по центру строки. space-between Флексы равномерно распределяются по всей строке. Первый и последний элемент прижимаются к соответствующим краям контейнера. space-around Флексы равномерно распределяются по всей строке. Пустое пространство перед первым и после последнего элементов равно половине пространства между двумя соседними элементами. space-evenly Флексы распределяются так, что расстояние между любыми двумя соседними элементами, а также перед первым и после последнего, было одинаковым.

The justify-content property aligns flex items along the main axis of the current line of the flex container. This is done after any flexible lengths and any auto margins have been resolved. Typically it helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

Applies to: flex containers.

Initial: flex-start.

flex-start Flex items are packed toward the start of the line. The main-start margin edge of the first flex item on the line is placed flush with the main-start edge of the line, and each subsequent flex item is placed flush with the preceding item. flex-end Flex items are packed toward the end of the line. The main-end margin edge of the last flex item is placed flush with the main-end edge of the line, and each preceding flex item is placed flush with the subsequent item. center Flex items are packed toward the center of the line. The flex items on the line are placed flush with each other and aligned in the center of the line, with equal amounts of space between the main-start edge of the line and the first item on the line and between the main-end edge of the line and the last item on the line. (If the leftover free-space is negative, the flex items will overflow equally in both directions.) space-between Flex items are evenly distributed in the line. If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to flex-start. Otherwise, the main-start margin edge of the first flex item on the line is placed flush with the main-start edge of the line, the main-end margin edge of the last flex item on the line is placed flush with the main-end edge of the line, and the remaining flex items on the line are distributed so that the spacing between any two adjacent items is the same. space-around Flex items are evenly distributed in the line, with half-size spaces on either end. If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to center. Otherwise, the flex items on the line are distributed such that the spacing between any two adjacent flex items on the line is the same, and the spacing between the first/last flex items and the flex container edges is half the size of the spacing between flex items. space-evenly Flex items are evenly distributed in the line. If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to center. Otherwise, the flex items on the line are distributed such that the spacing between each one is the same.

align-items

flex-start
flex-end
center
baseline
stretch
русский
english

Свойство align-items выравнивает флекс-элементы внутри контейнера в перпендикулярном направлении.

Применяется к: flex контейнерам.

Значение по умолчанию: stretch.

flex-start Флексы выравниваются в начале поперечной оси контейнера. flex-end Флексы выравниваются в конце поперечной оси контейнера. center Флексы выравниваются по линии поперечной оси. baseline Флексы выравниваются по их базовой линии. Stretch Флексы растягиваются таким образом, чтобы занять всё доступное пространство контейнера.

Flex items can be aligned in the cross axis of the current line of the flex container, similar to justify-content but in the perpendicular direction. align-items sets the default alignment for all of the flex container’s items, including anonymous flex items. align-self allows this default alignment to be overridden for individual flex items. (For anonymous flex items, align-self always matches the value of align-items on their associated flex container.)

If either of the flex item’s cross-axis margins are align-self has no effect.

On absolutely positioned elements, a value of auto computes to itself. On all other elements, a value of auto for align-self computes to the value of align-items on the element’s parent, or stretch if the element has no parent. The alignments are defined as:

Applies to: flex containers.

Initial: stretch.

flex-start The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line. flex-end The cross-end margin edge of the flex item is placed flush with the cross-end edge of the line. center The flex item’s margin box is centered in the cross axis within the line. (If the cross size of the flex line is less than that of the flex item, it will overflow equally in both directions.) baseline If the flex item’s inline axis is the same as the cross axis, this value is identical to flex-start. Otherwise, it participates in baseline alignment: all participating flex items on the line are aligned such that their baselines align, and the item with the largest distance between its baseline and its cross-start margin edge is placed flush against the cross-start edge of the line. Stretch If the cross size property of the flex item computes to auto, and neither of the cross-axis margins are auto, the flex item is stretched. Its used value is the length necessary to make the cross size of the item’s margin box as close to the same size as the line as possible, while still respecting the constraints imposed by min-height/min-width/max-height/max-width. Note: If the flex container’s height is constrained this value may cause the contents of the flex item to overflow the item.The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line.

align-self

flex-start
flex-end
center
baseline
stretch
русский
english

Свойство align-self выравнивает флекс-элементы текущей строки, переписывая значение align-items.

Применяется кo: flex элементам.

Значение по умолчанию: auto.

flex-start Элемент выравнивается в начале поперечной оси контейнера. flex-end Элемент выравнивается в конце поперечной оси контейнера. center Элемент выравнивается по центральной линии на поперечной оси. baseline Элемент выравнивается по базовой линии текста. Stretch Элемент растягивается таким образом, чтобы занять всё свободное пространство контейнера по поперечной оси.

Flex items can be aligned in the cross axis of the current line of the flex container, similar to justify-content but in the perpendicular direction. align-items sets the default alignment for all of the flex container’s items, including anonymous flex items. align-self allows this default alignment to be overridden for individual flex items. (For anonymous flex items, align-self always matches the value of align-items on their associated flex container.)

If either of the flex item’s cross-axis margins are align-self has no effect.

On absolutely positioned elements, a value of auto computes to itself. On all other elements, a value of auto for align-self computes to the value of align-items on the element’s parent, or stretch if the element has no parent. The alignments are defined as:

Applies to: flex items.

Initial: auto.

flex-start The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line. flex-end The cross-end margin edge of the flex item is placed flush with the cross-end edge of the line. center The flex item’s margin box is centered in the cross axis within the line. (If the cross size of the flex line is less than that of the flex item, it will overflow equally in both directions.) baseline If the flex item’s inline axis is the same as the cross axis, this value is identical to flex-start. Otherwise, it participates in baseline alignment: all participating flex items on the line are aligned such that their baselines align, and the item with the largest distance between its baseline and its cross-start margin edge is placed flush against the cross-start edge of the line. Stretch If the cross size property of the flex item computes to auto, and neither of the cross-axis margins are auto, the flex item is stretched. Its used value is the length necessary to make the cross size of the item’s margin box as close to the same size as the line as possible, while still respecting the constraints imposed by min-height/min-width/max-height/max-width. Note: If the flex container’s height is constrained this value may cause the contents of the flex item to overflow the item.The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line.

align-content

flex-start
flex-end
center
space-between
space-around
space-evenly
stretch
русский
english

Свойство align-content задаёт тип выравнивания строк внутри flex контейнера по поперечной оси при наличии свободного пространства.

Применяется к: flex контейнеру.

Значение по умолчанию: stretch.

flex-start Строки располагаются в начале поперечной оси. Каждая следующая строка идёт вровень с предыдущей. flex-end Строки располагаются начиная с конца поперечной оси. Каждая предыдущая строка идёт вровень со следующей. center Строки располагаются по центру контейнера. space-between Строки равномерно распределяются в контейнере и расстояние между ними одинаково. space-around Строки равномерно распределяются таким образом, чтобы пространство между двумя соседними строками было одинаковым. Пустое пространство перед первой строкой и после последней строки равно половине пространства между двумя соседними строками. space-evenly Строки распределяются равномерно. Пустое пространство перед первой строкой и после последней строки имеет ту же ширину, что и у других строк. stretch Строки равномерно растягиваются, заполняя свободное пространство.

The align-content property aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis. Note, this property has no effect on a single-line flex container. Values have the following meanings:

Note: Only multi-line flex containers ever have free space in the cross-axis for lines to be aligned in, because in a single-line flex container the sole line automatically stretches to fill the space.

Applies to: flex containers.

Initial: stretch.

flex-start Lines are packed toward the start of the flex container. The cross-start edge of the first line in the flex container is placed flush with the cross-start edge of the flex container, and each subsequent line is placed flush with the preceding line. flex-end Lines are packed toward the end of the flex container. The cross-end edge of the last line is placed flush with the cross-end edge of the flex container, and each preceding line is placed flush with the subsequent line. center Lines are packed toward the center of the flex container. The lines in the flex container are placed flush with each other and aligned in the center of the flex container, with equal amounts of space between the cross-start content edge of the flex container and the first line in the flex container, and between the cross-end content edge of the flex container and the last line in the flex container. (If the leftover free-space is negative, the lines will overflow equally in both directions.) space-between Lines are evenly distributed in the flex container. If the leftover free-space is negative this value is identical to flex-start. Otherwise, the cross-start edge of the first line in the flex container is placed flush with the cross-start content edge of the flex container, the cross-end edge of the last line in the flex container is placed flush with the cross-end content edge of the flex container, and the remaining lines in the flex container are distributed so that the spacing between any two adjacent lines is the same. space-around Lines are evenly distributed in the flex container, with half-size spaces on either end. If the leftover free-space is negative this value is identical to center. Otherwise, the lines in the flex container are distributed such that the spacing between any two adjacent lines is the same, and the spacing between the first/last lines and the flex container edges is half the size of the spacing between flex lines. space-evenly Lines are evenly distributed in the flex container. If the leftover free-space is negative this value is identical to center. Otherwise, the lines in the flex container are distributed such that the spacing between every flex line is the same. stretch Lines stretch to take up the remaining space. If the leftover free-space is negative, this value is identical to flex-start. Otherwise, the free-space is split equally between all of the lines, increasing their cross size.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL