Какое css свойство позволяет управлять порядком наложения элементов

position

Исходный код этого интерактивного примера хранится в GitHub репозитории. Если вы хотите внести свой вклад в проект интерактивных примеров, скопируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.

Типы позиционирования

  • Позиционируемый элемент — это элемент, у которого вычисленное значение position является relative , absolute , fixed либо sticky . (Другими словами, это все, кроме static .)
  • Относительно позиционируемый элемент является элементом, вычисленное значение position которого является relative . Свойства top и bottom определяют смещение по вертикали от его нормального положения; свойства left (en-US) и right задают горизонтальное смещение.
  • Абсолютно позиционируемый элемент — это элемент, чьё вычисленное значение position является absolute или fixed . top , right , bottom и left (en-US) задают смещения от краёв содержащего блок элемента . (Содержащий блок является предком, относительно которого расположен элемент.) Если элемент имеет поля, они добавляются к смещению. Элемент устанавливает новый контекст форматирования блока (BFC) для своего содержимого.
  • Элемент с липкой позицией — это элемент, у которого значение вычисленного position является sticky . Он рассматривается как относительно позиционированный до тех пор, пока содержащий его блок не пересечёт указанный порог (например, установка top в значение, отличное от auto ) внутри его корня потока (или в контейнере, в котором он прокручивается), после чего он обрабатывается как «застрявший» до тех пор, пока не встретит противоположный край содержащего его блока .

В большинстве случаев абсолютно позиционированный элементы, которые имеют height и width установленные в auto , имеют размер, соответствующий их содержимому. Тем не менее, незамещаемые, абсолютно позиционированный элементы можно сделать такими, чтобы они заполнили доступное вертикальное пространство, указав как top , так и bottom , и оставляя height неопределённым (то есть , auto ). Ими также можно заполнить доступное горизонтальное пространство, указав как left (en-US) , так и right , и оставляя width как auto .

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

  • Если указаны top и bottom (технически, не auto ) — приоритет будет у top .
  • Если указаны left и right : приоритет будет у left , когда direction ltr (английский язык, горизонтальный японский и т. д.), приоритет будет у right , когда direction является rtl (персидский , Арабский, иврит и т. д.).

Синтаксис

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

Значения

Формальный синтаксис

Примеры

Относительное позиционирование

Относительно позиционированные элементы смещены на определённую величину от их обычной позиции в документе, но без смещения, влияющего на другие элементы. В приведённом ниже примере обратите внимание, как размещаются другие элементы, как если бы «Two» занимало пространство своего обычного расположения.

Абсолютное позиционирование

Элементы, расположенные относительно друг друга, остаются в нормальном потоке документа. В противоположность этому, элемент с абсолютным позиционированием, выбивается из потока; таким образом, другие элементы располагаются без учёта абсолютных. Абсолютно позиционируемый элемент располагается относительно его ближайшего предка (который не является static ). Если такого предка не существует, то абсолютный элемент позиционируется относительно ICB (начальный содержащий блок — см. также определение W3C), который содержит блок корневого элемента документа.

Фиксированное позиционирование

Фиксированное позиционирование аналогично абсолютному, за исключением того, что блок, содержащий элемент, является начальным содержащим блоком, установленным в окне просмотра, если только у какого-либо предка не было transform , perspective , или свойства filter , отличное от none (см. CSS Transforms Spec), из-за чего этот предок занимает место элементов, содержащих блок. Это можно использовать для создания «плавающего» элемента, который остаётся в том же положении независимо от прокрутки. В приведённом ниже примере окно c id="one" фиксируется в 80 пикселях от верхней части страницы и в 10 пикселях слева. Даже после прокрутки оно остаётся в том же месте относительно окна просмотра.

Липкое позиционирование

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

. позиционирует элемент с id "one" относительно до тех пор, пока видовой экран не будет прокручен таким образом, чтобы элемент был меньше 10 пикселей от вершины. Помимо этого порога элемент будет зафиксирован на 10 пикселей сверху.

Типичное использование для липкого позиционирования — для заголовков в алфавитном списке. Заголовок «B» появится чуть ниже элементов, начинающихся с «A», пока они не будут прокручиваться за кадром. Вместо того, чтобы скользить за кадром с остальной частью содержимого, заголовок «B» затем останется фиксированным в верхней части окна просмотра, пока все элементы «B» не будут прокручиваться на экране, и в этот момент он будет закрыт «C», заголовок и т. д.

Вы должны указать порог с по крайней мере одним из top , right , bottom , или left (en-US) для того, чтобы липкое позиционирование могло вести себя так, как ожидалось. В противном случае он будет неотличим от относительного позиционирования.

z-index

Обычно элементы на странице располагаются только в двух измерениях — x (горизонталь) и y (вертикаль). Но в отдельных случаях, когда позиционирование элементов отличается от статичного, появляется третье измерение z, отвечающее за глубину.

Свойство z-index позволяет управлять порядком наложения элементов друг на друга.

Пример

Возьмём самую частую ситуацию, где пригождается z-index — наложение полупрозрачной вуали поверх блока с фоном и текстом.

У нас будет разметка для шапки сайта:

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

Если всё оставить как есть, то псевдоэлемент с вуалью будет перекрывать текст заголовка и затемнять его. По логике браузера абсолютный псевдоэлемент накладывается поверх блока <header> вместе со всем его содержимым. Представьте себе стопку листов, один поверх другого.

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

Добавим пару свойств. Отрицательный z-index опустит вуаль ниже текста:

Как пишется

Значением свойства z-index может быть отрицательное или положительное целое число. Значение по умолчанию — auto .

Как это понять

Браузер выстраивает блоки страницы не только по вертикали и горизонтали, но и по глубине. Это встроенный механизм обработки документа. Чем ниже блок в разметке, тем выше он в стопке. Управлять порядком наложения блоков мы как раз и можем при помощи z-index .

Подсказки

&#128161; z-index срабатывает только для элементов с позиционированием (свойство position ), отличающимся от статичного (значения relative , absolute , fixed , sticky ).

&#128161; Исключение из правил: z-index работает с элементами, у которых значение свойства opacity меньше 1. Например, трюк с opacity: 0.999 почти не повлияет на внешний вид, но позволит использовать z-index без изменения позиционирования элемента.

&#128161; Если z-index не указан, то блоки накладываются друг на друга в том порядке, в котором указаны в разметке. Чем ниже в разметке, тем выше в стопке. А если указан, то стопка блоков формируется согласно значению этого свойства.

На практике

Алёна Батицкая

&#128736; Часто вижу такие записи z-index: 99999 . Видимо, это нужно чтобы совершенно точно блок был поверх всего. Но обычно это избыточно и может привести к неожиданным последствиям в процессе поддержки сайта. Я обычно проставляю значения -1, 0 и 1. А если нужно что-то большее, то значения 10 будет вполне достаточно.

CSS :: Модуль CSS Flexbox

(от англ. CSS Flexible Box Layout — модуль макета гибкого контейнера) — представляет собой специальную блочную модель CSS , которая позволяет эффективно управлять элементами внутри родительского флекс-контейнера. В частности, модель дает возможность располагать дочерние элементы флекс-контейнера в строках или колонках, переопределять порядок их отображения, выравнивать различными способами, а также изменять размеры элементов для корректного заполнения свободного пространства флекс-контейнера.

Как следует из определения, CSS Flexbox представляет собой полноценный модуль и поэтому включает в себя целый набор различных свойств, одни из которых применяется к родительскому элементу (т.е. флекс-контейнеру), другие — к самим дочерним элементам (т.е. флекс-элементам). Однако прежде, чем приступить к описанию этих свойств и их возможностей, необходимо познакомиться с понятиями направлений и размеров, которые используются для описания флекс-контейнера (см. рисунок №1 ).

Рис. №1. Направления и размеры флекс-контейнера со строками

Схема флекс-контейнера взята из официальной документации W3C . Перечислим основные термины, использующиеся в ней:

  • main axis – главная ось флекс-контейнера, вдоль которой располагаются его флекс-элементы (в нашем случае это горизонтальная ось, поэтому горизонтальное направление считается основным);
  • main start и main end – начальная и конечная стороны флекс-контейнера, между которыми располагаются флекс-элементы вдоль главной оси в направлении от main start к main end ;
  • main size – размер флекс-контейнера или флекс-элемента, который принимается за основной; это может быть как ширина, так и высота, в зависимости от того, какая ось будет выбрана главной: горизонтальная или вертикальная (в нашем случае основным размером считается ширина, т.к. соответствующие стороны флекс-контейнера и его флекс-элементов параллельны главной оси);
  • cross axis – поперечная ось флекс-контейнера (она всегда перпендикулярна главной оси);
  • cross start и cross end – начальная и конечная стороны флекс-контейнера, между которыми располагаются флекс-элементы вдоль поперечной оси в направлении от cross start к cross end ;
  • cross size – размер флекс-контейнера или флекс-элемента, который принимается за поперечный (в нашем случае поперечным размером считается высота, т.к. вертикальные стороны флекс-контейнера и его флекс-элементов параллельны поперечной оси).

Создание flex-контейнера

Для того чтобы создать flex -контейнер и получить возможность управлять его flex -элементами, нужно использовать для элемента свойство display со значениями flex или inline-flex (см. пример №2 ). В первом случае флекс-контейнеры будут вести себя, как блочные элементы, располагаясь друг под другом по вертикали, а во втором — как строчные элементы, выстраиваясь друг за другом по горизонтали.

Пример №2. Пример создания flex-контейнера

В примере мы создали четыре одинаковых блочных флекс-контейнера ( display: flex ), включающих по восемь пронумерованных дочерних элементов. В третий блок мы дополнительно добавили изображения и простой текст. Рассмотрим каждый из этих блоков подробнее.

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

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

В третьем флекс-контейнере мы добавили изображения и простой текст. В такой ситуации изображения и текст без оберток становятся анонимными флекс-элементами, занимая свое место в ряду других флекс-элементов. При этом текст выравнивается по верхнему краю контейнера, а изображение деформируется и растягивается на всю высоту блока. Что касается ширины анонимных блоков, то она зависит от содержимого, т.е. текста или ширины изображения. Далее, учитывая то, что флекс-элементов в блоке стало очень много, а их ширина достигла своего минимального значения, которое у флекс-элементов по умолчанию устанавливается в min-width: auto , они вышли в основном направлении за пределы своего флекс-контейнера.

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

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

css-свойство flex-direction

Главная ось флекс-контейнера необязательно должна быть направлена горизонтально слева направо. Ее направление можно легко изменить при помощи ненаследуемого css -свойства flex-direction, которое задает направление главной оси флекс-контейнера, определяя порядок расположения флекс-элементов в нем (см. пример №3 ). В качестве значений свойство принимает следующие ключевые слова:

  • row – главная ось направлена горизонтально в направлении записи текста (используется по умолчанию); напомним, что направление записи текста в элементе задается универсальным атрибутом dir и по умолчанию имеет значение ltr (т.е. слева направо), именно поэтому флекс-элементы по умолчанию также отображаются строкой слева направо в направлении от стороны main start к main end ;
  • row-reverse – главная ось также направлена горизонтально, но при этом стороны main start и main end флекс-контейнера располагаются в направлении противоположном направлению записи текста в контейнере, поэтому флекс-элементы отображаются в строку, но в обратном порядке;
  • column – главная ось направлена вертикально сверху вниз, поэтому флекс-элементы отображаются колонкой сверху вниз в направлении от стороны main start к main end ;
  • column-reverse – главная ось направлена вертикально снизу вверх, поэтому флекс-элементы отображаются колонкой снизу вверх в направлении от стороны main start к main end .

Пример №3. Пример использования свойства flex-direction

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

css-свойство flex-wrap

По умолчанию все флекс-элементы выстраиваются в одну строку, стараясь вместиться в пределах своего флекс-контейнера. В результате, как мы видели в примере выше, могут возникать ситуации, когда флекс-элементы будут выходить за пределы своего контейнера. Для таких ситуаций в CSS предусмотрено ненаследуемое свойство flex-wrap, которое управляет порядком переноса и отображения флекс-элементов на новые строки (см. пример №4 ). В качестве значений свойство принимает следующие ключевые слова:

  • nowrap – флекс-элементы отображаются в одной линии (значение используется по умолчанию);
  • wrap – флекс-элементы выстраиваются в несколько строк, направление которых задаётся свойством flex-direction;
  • wrap-reverse – флекс-элементы также выстраиваются в несколько строк, но в направлении, которое противоположно направлению заданному свойством flex-direction.

Пример №4. Пример использования свойства flex-wrap

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

Универсальное css-свойство flex-flow

Поскольку свойства flex-direction и flex-wrap используются в паре довольно часто, в CSS добавили ненаследуемое свойство flex-flow, которое может принимать через пробел сразу два значения: flex-flow: flex-direction || flex-wrap (см. пример №5 ). По умолчанию для первого значения используется row , а для второго — nowrap . Если указать только один параметр, второй примет значение по умолчанию.

Пример №5. Пример использования свойства flex-flow

Обратите внимание, что результат отображения данного примера идентичен результату примера №4 , но при этом кода написано меньше.

css-свойство order

Иногда может потребоваться, чтобы некоторые флекс-элементы выстраивались вдоль заданного направления не по порядку. В таких случаях следует использовать ненаследуемое css -свойство order, которое применяется к флекс-элементам и переопределяет порядок их отображения. В качестве значений свойство принимает целые числа (как положительные, так и отрицательные). В результате флекс-элементы с меньшими значениями свойства order выводятся раньше, а элементы, имеющие большие значения выводятся позже (см. пример №6 ). Если флекс-элементы имеют одинаковые значения свойства order , они выводятся согласно их первоначальному порядку.

Пример №6. Пример использования свойства order

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

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

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

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

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

  • Первый шаг. Рассчитываем свободное пространство флекс-контейнера (СПК). Для этого от ширины контейнера (ШК) (чистое пространство без паддингов) отнимаем сумму базовых размеров флекс-элементов (СБР), а также сумму их паддингов (СПЭ), соответствующих данному направлению: СПК = ШК — СБР — СПЭ.
  • Второй шаг. Рассчитываем размер доли свободного пространства (РДСП), которое займет данный флекс-элемент:
  • если сумма всех коэффициентов роста флекс-элементов больше нуля, но меньше единицы (например, равна 0.8 ), то умножаем размер свободного пространства контейнера на коэффициент роста (КР) требуемого флекс-элемента: РДСП = СПК * КР;
  • если сумма всех коэффициентов роста флекс-элементов больше единицы или равна ей, то размер свободного пространства умножаем на коэффициент роста данного элемента, а затем делим результат на сумму коэффициентов роста (СКР) всех элементов контейнера: РДСП = СПК * КР / СКР.

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

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

Пример №7. Пример использования свойства flex-grow

Как видим, в первом блоке флекс-элементы не занимают свободное пространство флекс-контейнера, т.к. по умолчанию их коэффициенты роста равны нулю.

Во втором блоке мы применили встроенный стиль для третьего флекс-элемента, задав ему коэффициент роста 0.5 . Т.к. размер свободного пространства равен 500px- 3*30px- 3*20px= 350px , итоговый размер третьего элемента стал равен 30px+ 350px*0.5= 30px+ 175px= 205px (размеры первого и второго элементов не изменились, т.к. по умолчанию их коэффициенты роста равны нулю).

В третьем блоке сумма коэффициентов роста равна 0.9 (т.е. меньше единицы), а размер свободного пространства равен 350px , т.к. 500px- 3*30px- 3*20px= 350px . Следовательно итоговый размер второго элемента будет равен 30px+ 350px*0.3= 30px+ 105px= 135px , а третьего — 30px+ 350px*0.6= 30px+ 210px= 240px (размер первого элемента не изменился, т.к. по умолчанию его коэффициент роста равен нулю).

В четвертом блоке сумма коэффициентов роста равна 3 (т.е. больше единицы), поэтому элементы распределяют между собой 100% свободного пространства, что составляет величину в 220px , т.к. 500px- 50px- 70px- 100px- 3*20px= 220px (мы использовали встроенные стили для изменения ширины элементов). Следовательно итоговый размер первого элемента будет равен 50px+ 220px*0.5/3= 50px+ 36.67px= 86.67px , второго — 70px+ 220px*1/3= 70px+ 73.33px= 143.33px , третьего — 100px+ 220px*1.5/3= 100px+ 110px= 210px .

Поэкспериментируйте с исходным кодом примера: поизменяйте коэффициенты роста элементов, количество самих элементов, у которых их значения будут отличны от нуля, попробуйте различные значения паддингов и ширины элементов, а в конце используйте свойство box-sizing: border-box и посмотрите, как изменится конечный результат при прочих равных условиях. Ну, и в конце хотелось бы напомнить, что результаты изменений вы можете отслеживать в инструментах для разработчиков в своем браузере.

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

Довольно часто может наблюдаться противоположная ситуация, когда свободное пространство в контейнере отсутствует, а флекс-элементам приходится сжиматься во избежание переполнения своего флекс-контейнера. По умолчанию в таких ситуациях все флекс-элементы отдают свое доступное пространство на общее благо на равных правах. Однако такое поведение можно именить при помощи ненаследуемого css -свойства flex-shrink, которое применяется к флекс-элементам и определяет, какую долю своего доступного пространства будет отдавать данный флекс-элемент по сравнению с другими флекс-элементами (см. пример №8 ). В качестве значений свойство принимает число, называемое флекс-элемента. Он может быть нулем (флекс-элемент не участвует в сжатии) или любым положительным целым или дробным числом (по умолчанию 1 ). При этом следует помнить, что при установке паддингов у флекс-элементов, они при сжатии не уменьшаются (уменьшаться может только сам базовый размер элемента). Кроме того, чем больше коэффициент сжатия, тем сильнее сжимается элемент по сравнению с другими элементами.

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

  • Первый шаг. Рассчитываем размер свободного отрицательного пространства флекс-контейнера (РСОПК). Для этого от ширины контейнера (ШК) (чистое пространство без паддингов) отнимаем сумму базовых размеров флекс-элементов (СБР), а также сумму их паддингов (СПЭ), соответствующих данному направлению: РСОПК = ШК — СБР — СПЭ;
  • Второй шаг. Находим сумму произведений (СПБР) базовых размеров (БР) флекс-элементов на их коэффициенты сжатия (КС): СПБР = БР1*КС1 + БР2*КС2 + . + БРn*КСn, где n — общее число флекс-элементов контейнера.
  • Третий шаг. Рассчитываем нормированный коэффициент сжатия (НКС) каждого флекс-элемента. Для этого находим произведение базового размера элемента на его коэффициент сжатия, а результат делим на сумму произведений всех базовых размеров флекс-элементов на их коэффициенты сжатия: НКС = БР*КС/СПБР.
  • Четвертый шаг. Рассчитываем итоговый размер флекс-элемента (ИР). Для этого от базового размера флекс-элемента отнимаем произведение модуля размера свободного отрицательного пространства на нормированный коэффициент сжатия: ИР = БР — РСОПК*НКС.

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

Пример №8. Пример использования свойства flex-shrink

В первом блоке флекс-элементы имеют одинаковый базовый размер (в нашем случае это ширина) в 200px и коэффициент сжатия равный 1 (установился по умолчанию). Рассчитываем размер свободного отрицательного пространства флекс-контейнера: 300px — 3*200px — 3*20px = -360px . Находим сумму произведений базовых размеров флекс-элементов на их коэффициенты сжатия: 200px*1 + 200px*1 + 200px*1 = 600px . Рассчитываем нормированный коэффициент сжатия каждого флекс-элемента (в нашем случае для всех элементов будет одинаковое значение): 200px*1/600px = 1/3 . Получаем итоговые размеры наших флекс-элементов (тоже будут одинаковы): 200px — 360px*(1/3) = 80px ( и не забываем проверить результат в браузере в инструментах для разработчика).

Во втором блоке флекс-элементы также имеют одинаковый базовый размер (в нашем случае это ширина) в 200px и одинаковый коэффициент сжатия равный 3 . Следовательно они также будут сжиматься полностью одинаково и будут иметь финальные размеры по 80px (схема та же, что и в первом блоке).

В третьем блоке все флекс-элементы имеют коэффициент сжатия равный 1 (установился по умолчанию), но для третьего флекс-элемента мы применили встроенный стиль, увеличив его ширину (базовый размер для нашего случая) до 250px . Рассчитываем размер свободного отрицательного пространства флекс-контейнера: 300px — 2*200px — 250px — 3*20px = -410px . Находим сумму произведений базовых размеров флекс-элементов на их коэффициенты сжатия: 200px*1 + 200px*1 + 250px*1 = 650px . Рассчитываем нормированный коэффициент сжатия каждого флекс-элемента: для первых двух элементов получаем 200px*1/650px = 4/13 , а для третьего — 250px*1/650px = 5/13 . Рассчитываем итоговые размеры наших флекс-элементов: для первого и второго элементов получаем величину 200px — 410px*(4/13) = 73.85px , а для третьего — 250px — 410px*(5/13) = 92.31px .

В четвертом блоке флекс-элементы имеют различные коэффициенты сжатия и размеры. Рассчитываем размер свободного отрицательного пространства флекс-контейнера: 300px — 200px — 300px — 400px — 3*20px = -660px . Находим сумму произведений базовых размеров флекс-элементов на их коэффициенты сжатия: 200px*0.5 + 300px*2 + 400px*6 = 3100px . Рассчитываем нормированный коэффициент сжатия каждого флекс-элемента: для первого элемента получаем 200px*0.5/3100px = 2/31 , для второго — 300px*2/3100px = 6/31 , а для третьего — 400px*6/3100px = 24/31 . Рассчитываем итоговые размеры наших флекс-элементов: для первого элемента получаем величину 200px — 660px*(2/31) = 157.42px , для второго — 300px — 660px*(6/31) = 172.33px , а для третьего — 400px — 660px*(24/31) = -110.97px .

Т.к. итоговый размер третьего флекс-элемента стал меньше допустимого минимального размера элемента (в нашем случае это «min-width: 50px» ), то ему присваиваем минимальный размер в 50px , а итоговые размеры первых двух элементов пересчитываем по алгоритму заново, но с учетом того, что третий элемент как бы имеет базовый размер в 50px и коэффициент сжатия 0 . Итак, рассчитываем размер свободного отрицательного пространства флекс-контейнера: 300px — 200px — 300px — 50px — 3*20px = -310px . Находим сумму произведений базовых размеров флекс-элементов участвующих в сжатии на их коэффициенты сжатия: 200px*0.5 + 300px*2 = 700px . Рассчитываем нормированный коэффициент сжатия каждого флекс-элемента: для первого элемента получаем значение 200px*0.5/700px = 1/7 , а для второго — 300px*2/700px = 6/7 . Рассчитываем итоговые размеры наших флекс-элементов: для первого — 200px — 310px*(1/7) = 155.71px , а для второго — 300px — 310px*(6/7) = 34.29px .

Как видим, для второго элемента значение получилось меньше допустимого минимального, поэтому его ширину также устанавливаем в 50px , а коэффициент сжатия в 0 . Повторяем алгоритм еще раз, но уже для одного оставшегося первого элемента. Рассчитываем размер свободного отрицательного пространства флекс-контейнера: 300px — 200px — 50px — 50px — 3*20px = -60px . Находим сумму произведений базовых размеров флекс-элементов участвующих в сжатии на их коэффициенты сжатия: 200px*0.5 = 100px . Рассчитываем нормированный коэффициент сжатия каждого флекс-элемента: 200px*0.5/100px = 1 . Рассчитываем итоговый размер нашего флекс-элемента: 200px — 60px*1 = 140px .

Поэкспериментируйте с исходным кодом примера: поизменяйте коэффициенты сжатия элементов, попробуйте различные значения паддингов и ширины элементов, а в конце используйте свойство box-sizing: border-box и посмотрите, как изменится конечный результат при прочих равных условиях. Опять же, результаты изменений вы можете отслеживать в инструментах для разработчиков в своем браузере.

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

Когда мы имеем дело с флекс-элементами, их базовый размер в зависимости от ситуации может быть как шириной элемента, так и его высотой. Однако в CSS присутствует ненаследуемое css -свойство flex-basis, позволяющее явно задать базовый размер флекс-элемента (см. пример №9 ). Соответственно, если свойство используется, его значение для определения базового размера будет иметь приоритет над значениями свойств width или height.

В качестве значений свойство flex-basis может принимать:

  • auto – базовый размер флекс-элемента устанавливается автоматически в зависимости от размера его содержимого (используется по умолчанию);
  • размер – разрешается использовать любые доступные в CSS единицы измерения длины, а также проценты, которые рассчитываются относительно размера флекс-контейнера.

Пример №9. Пример использования свойства flex-basis

В первом флекс-контейнере примера мы базовый размер для отдельных флекс-элементов не изменяли, поэтому все элементы визуально отображаются с шириной 70px (направление главной оси у нас горизонтальное, поэтому базовый размер переопределяет ширину). Высота же у всех элементов осталась такой, какой мы определили ее в таблицах стилей, т.е. 20px .

Во втором флекс-контейнере мы каждому флекс-элементу задали свой базовый размер. Высота при этом у всех также осталась равна 20px .

В третьем флекс-контейнере мы изменили направление главной оси на вертикальное и переопределили его высоту, установив новое значение в 380px (чтобы было хорошо видно колонку). Так как теперь направление главной оси вертикальное, базовый размер играет роль высоты. Поэтому мы и видим, что высота первых двух флекс-элементов увеличилась и стала равна базовому размеру, т.е. 70px . А вот ширина всех флекс-элементов стала равна 200px , как и было определено в таблице стилей (ведь в данном блоке базовый размер переопределяет уже высоту). Для третьего элемента мы для примера переопределили его базовый размер, поэтому его высота стала равна 40px , но ширина осталась равна 200px .

Сокращенное css-свойство flex

Для перечисленных выше трех свойств флекс-элементов в CSS предусмотрено сокращенное ненаследуемое css -свойство flex (см. пример №10 ), которое через пробел позволяет задавать коэффициент роста (по умолчанию используется 0 ), коэффициент сжатия (по умолчанию используется 1 ) и базовый размер флекс-элемента (по умолчанию используется auto ). В случае необходимости разрешается также использовать и следующие служебные слова:

  • none – соответствует комбинации flex: 0 0 auto ;
  • auto – соответствует комбинации flex: 1 1 auto .

Пример №10. Пример использования свойства flex

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

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

css-свойство justify-content

Помимо управления направлением вывода флекс-элементов CSS предоставляет возможности и по выравниванию их вдоль требуемой оси. Начнем с главной оси. Для управления способом выравнивания флекс-элементов вдоль главной оси и распределения пространства между ними используется ненаследуемое css -свойство justify-content (см. пример №11 ), которое может принимать в качестве значений следующие ключевые слова:

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

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

Пример №11. Пример использования свойства justify-content

Как видим, в последнем флекс-контейнере конструкция justify-content: space-evenly; не сработала, т.к. мы задали для флекс-элементов внешние отступы. Попробуйте сделать тоже самое в таблице стилей для всех флекс-элементов и посмотрите на результат.

css-свойства align-items и align-self

Для управления способом выравнивания флекс-элементов вдоль поперечной оси используются ненаследуемые css -свойства align-items и align-self (см. пример №12 ). Свойство align-items применяется к флекс-контейнеру и действует сразу на все его флекс-элементы, а свойство align-self применяется к флекс-элементам и позволяет управлять их выравниванием вдоль поперечной оси контейнера по-отдельности (переопределяя значение свойства align-items ).

В качестве значений свойства могут принимать следующие ключевые слова:

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

Свойство align-self может принимать еще и значение auto . В этом случае будет использоваться значение свойства align-items для родительского флекс-контейнера или значение stretch , если родителя нет.

Что касается значений по умолчанию, то для align-items — это stretch , а для align-self — это auto .

Следует отметить, что если будут заданы значения внешних отступов margin в направлении поперечной оси, то свойства align-items и align-self будут игнорироваться.

Пример №12. Пример использования свойств align-items и align-self

В третьем флекс-контейнере мы дополнительно задали внешние отступы вдоль главной оси (в нашем случае это горизонтальное направление). Как видим, выравнивание вдоль поперечной оси сохранилось.

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

В последнем флекс-контейнере конструкция align-items: center; не сработала, т.к. мы дополнительно задали для флекс-элементов внешние отступы вдоль поперечной оси (в нашем случае она имеет вертикальное направление).

css-свойство align-content

Если флекс-элементов в контейнере достаточно много и у них есть возможность занимать несколько строк, возникает необходимость в выравнивании этих строк и распределении пространства между ними вдоль поперечной оси флекс-контейнера. Для этих целей в CSS предусмотрено ненаследуемое css -свойство align-content (см. пример №13 ), которое может принимать в качестве значений следующие ключевые слова:

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

Пример №13. Пример использования свойства align-content

Чтобы элементы имели одинаковые размеры и выравнивались равномерно в самих строках, мы для наглядности установили автоматические внешние отступы для всех флекс-элементов ( margin: auto; ).

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *