Как поместить объект в центр css
Перейти к содержимому

Как поместить объект в центр css

  • автор:

Заголовок

Фон можно залить и картинкой. По умолчанию она тайлится вертикально и горизонтально (этим можно управлять при помощи свойства background-repeat):

body < background-image: url("paper.gif"); background-repeat: no-repeat; /* если не надо, чтобы тайлилась */ background-repeat: repeat-x; /* тайлится только горизонтально (но не вертикально) */ background-position: right top; /* куда прижать картинку */ background-attachment: fixed; /* фиксированное положение, не скролится со страницей */ >

Можно всё это объеденить одной строкой:
body

Бордюр

Бордюр любого элемента: блока , параграфа и т.п. задаётся стилями:

border-style: solid; /* dotted; dashed; solid; double; groove; ridge; inset; outset; none; hidden; */ border-width: 5px; /* толщина рамки */ border-color: red; /* цвет рамки */ border-top-style: dotted; /* для каждой стороны своя линия */ border-right-style: solid; border-bottom-style: dotted; border-left-style: solid; border-style: dotted dashed solid double; /* аналогично сверху, по часовой стрелке */ border: 5px solid red; /* одной строкой */

Текст

Отступы

Свойство margin создаёт отступы вокруг элементов:
div.margin

Затем можно написать два вложенных div, причём внутренний будет иметь отступы от внешнего, а внешний — относительно страницы:

 
This div element has a top margin of 40px, a right margin of 20px, a bottom margin of 30px, and a left margin of 10px.

This div element has a top margin of 40px, a right margin of 20px, a bottom margin of 30px, and a left margin of 10px.

Задание отступов можно объеденять в одной строке:

margin: 100px 150px 100px 80px; /* top right bottom left */ margin: 25px 50px; /* top and bottom = 25px, right and left = 50px */ margin: 25px; /* all four margins are 25px */ margin: auto; /* horizontally center the element within its container */

Аналогично свойство padding создаёт пространство вокруг контента внутри объекта (например, делает отступы для текста внутри рамки):

margin
padding
content

Размер

Задание размеров объекта может быть в процентах, пикселях или em-ах. Размер 1em равен размеру текущего шрифта (если шрифт = 16px, то 1em=16px).

Если надо, чтобы при уменьшении окна бразузера ширина объектка тоже уменьшалась (если она не помещается) то,:

Можно использовать функцию calc:

width: 90%; /* для браузеров не поддерживающих calc() */ width: calc(100% - 80px);

Внимание: ширина блока получается сложением значений width, padding, margin и border. Браузеры неодинаково работают с шириной, результат отображения зависит от используемого .

 
width:100px
width:100px + padding

width:100px
width:100px + padding

Центрирование

Для центрирования объекта по горизонтали (div-ка относительно страницы) используем стиль margin:auto. При этом центрируется сам блок, а не его содеримое (для центрирования текста надо использовать text-align:center):

Abc
123

Для центрирования объекта по вертикали (с div не работает):

 
123 A

vertical-align влияет на выравнивание самого элемента, а не его содержимого (кроме случаев, когда оно применяется к ячейкам таблицы).

Ещё пример вертикального позиционирования span-элементов:

 
TEX и LA TEX

T E X и L A T E X
Для центрирования div-ки надо делать что-то типа:

div.cntr < height : 100px; /* фиксировать её высоту */ position: relative; margin : auto; /* центр по ширине */ top: calc(50% - 50px); /* центр по высоте, где 50px = height/2 */ >

Хотя можно в контейнере написать:

style = "display: flex; justify-content:center; align-items:center; "

Свойство «overflow»

  • visible — содержимое отображается за границами блока (по умолчанию);
  • hidden — переполняющее содержимое не отображается;
  • auto — при переполнении отображается полоса прокрутки;
  • scroll — полоса прокрутки отображается всегда;

Определим класс:

div.overflow

и вставим код:

 
ЭтотТекстОбрезанСправаЭтотТекстОбрезанСправа Этот текст будет обрезан снизу Этот текст будет обрезан снизу

hidden ЭтотТекстОбрезанСправаЭтотТекстОбрезанСправа Этот текст будет обрезан снизу Этот текст будет обрезан снизу Этот текст будет обрезан снизу Этот текст будет обрезан снизу

Можно также указать поведение блока при переполнении по ширине в overflow-x и высоте – в overflow-y:

div.scroll < height: 100px; border: 1px solid black; overflow-x: hidden; /* Hide horizontal scrollbar */ overflow-y: scroll; /* Add vertical scrollbar */ >

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

Вдали над пылью переулочной,
Над скукой загородных дач,
Чуть золотится крендель булочной,
И раздается детский плач.

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

Над озером скрипят уключины
И раздается женский визг,
А в небе, ко всему приученный
Бесмысленно кривится диск.

И каждый вечер друг единственный
В моем стакане отражен
И влагой терпкой и таинственной
Как я, смирен и оглушен.

Плавающие объекты

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

img.right < float: right; /* wrap text around images */ margin: 5px 5px 5px 10px; >
 И каждый вечер, в час назначенный .

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

«Блоки после плавающего блока будут плавать вокруг него. Для избежания этого используют свойство clear в котором указывается с какой стороны блока плавания не будет.»

Например, для «цитаты» справа над началом текста (как выше), делаются три абзаца:

 

Цитата.

. собственно текст .

Если у блоков есть рамки, то надо чуть меньше 50%, так как их реальной ширине добаляется 2px рамок.
section
Вставляем разметку:

 
sec1
sec2

Блоки в строку

При помощи display: inline-block; можно делать прилипающие друг к дугу блоки:
.floating-box < display: inline-block; width: 250px; height: 25px; margin: 10px; border: 3px solid #73AD21; >.after-box

Floating box
Floating box
Floating box
Floating box
after the floating boxes.

Floating box
Floating box
Floating box
Floating box
after the floating boxes.

Впрочем, тоже можно сделать «по-старинке» при помощи float: left; и clear: left;

.floating-box
.after-box

Ссылки

a < text-decoration: none; >a:link < /* unvisited link */ color: red; >a:visited < /* visited link */ color: green; >a:hover < /* mouse over link */ color: hotpink; background-color: lightgreen; text-decoration: underline; padding: 14px 25px; text-align: center; display: inline-block; /* внутри прямоуголька цвета background-color */ >a:active < /* selected link */ color: blue; >

Таблицы

Прижать текст всех колонок таблицы вправо, а таблицу по центру:

 table.border < border-collapse: collapse; >table.border th, table.border td < border: 1px solid #000; padding: 0 3px; >table.center < margin:auto>table.right tr td 
Заголовок Ещё
abc 3.14159
ab 12
хорьки
вес размер
самцы 1.5 кг до 70см
самки 1.0 кг до 40см
Заголовок Ещё
abc 3.14159
ab 12
хорьки
вес размер
самцы 1.5 кг до 70см
самки 1.0 кг до 40см

См. примеры оформления таблиц на css.

CSS и JavaScript

Свойство element.style возвращает объект, который дает доступ к стилю элемента на чтение и запись. С его помощью можно изменять большинство CSS-свойств, например element.style.width=»100px» работает так, как будто у элемента в атрибуте прописано style=»width:100px». Имена свойств через тире именуются так: elem.style.backgroundColor вместо background-color и т.д. Исключение — свойство float, для которого elem.style.cssFloat. Чтобы сбросить поставленный стиль, присваивают пустую строку: elem.style.width=»». Свойство style содержит лишь тот стиль, который указан непосредственно в атрибуте элемента, без учёта каскада CSS.

Специальные символы

Специальные символы html не относятся к css. Тем не менее, ниже приведены наиболее полезные из них.

Пробелы:  
Операции: · · × × ÷ ÷ < > > ± ±
Логика: & &
Стрелки:

Большую подброку можно найти тут.

Примеры

Поле ввода

Красивое поле ввода с рамочкой только при фокусе: (кликни сюда: ). Переопределяем стиль:
input[type=text], textarea < outline: none; padding: 2px; margin: 5px; border: 0px; border-bottom: 1px dotted blue; >input[type=text]:focus, textarea:focus

align-content

Свойство CSS align-content устанавливает распределение пространства между и вокруг элементами контента вдоль поперечной оси flexbox контейнера или вдоль блочной оси grid контейнера.

The interactive example below use Grid Layout to demonstrate some of the values of this property.

Интерактивный пример

Это свойство не влияет на однострочные flex-контейнеры (т.е. с flex-wrap: nowrap )

Синтаксис

/* Основное позиционное выравнивание */ /* align-content не принимает значения left и right */ align-content: center; /* Расположить элементы вокруг центра */ align-content: start; /* Расположить элементы в начале */ align-content: end; /* Расположить элементы в конце */ align-content: flex-start; /* Расположить элементы flex в начале */ align-content: flex-end; /* Расположить элементы flex в конце */ /* Нормальное выравнивание */ align-content: normal; /* Выравнивание по базовой линии */ align-content: baseline; align-content: first baseline; align-content: last baseline; /* Распределённое выравнивание */ align-content: space-between; /* Распределить элементы равномерно Первый элемент находится на одном уровне с началом, последней - совпадает с концом */ align-content: space-around; /* Распределить элементы равномерно Элементы имеют половинное пространство на каждом конце */ align-content: space-evenly; /* Распределить элементы равномерно Элементы имеют одинаковое пространство вокруг них */ align-content: stretch; /* Распределить элементы равномерно Растянуть 'auto'-размерные элементы, чтобы заполнить контейнер */ /* Выравнивание переполнения (overflow) */ align-content: safe center; align-content: unsafe center; /* Глобальные значения */ align-content: inherit; align-content: initial; align-content: unset; 

Значения

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

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

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

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

Элементы расположены вплотную друг к другу в центре контейнера выравнивания по поперечной оси.

Элементы расположены в их дефолтной позиции как если бы align-content не было определено.

baseline first baseline last baseline

Определяет участие в выравнивании первой или последней базовой линии: выравнивает базовую линию выравнивания первого или последнего базового набора блока с соответствующей базовой линией в общем первом или последнем базовом наборе всех блоков в его группе совместного использования базовой линии. Резервное выравнивание для first baseline равно start , для last baseline — end .

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

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

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

Если объединённый размер элементов вдоль поперечной оси меньше размера контейнера выравнивания, размер любого auto -размерного элемента увеличивается одинаково (не пропорционально), но при этом соблюдаются ограничения, налагаемые max-height / max-width (или эквивалентной функциональности), так что объединённый размер точно заполняет контейнер выравнивания вдоль поперечной оси.

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

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

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

align-content =
normal | (en-US)
| (en-US)
| (en-US)
? (en-US)

=
[ (en-US) first | (en-US) last ] (en-US) ? (en-US) && (en-US)
baseline

=
space-between | (en-US)
space-around | (en-US)
space-evenly | (en-US)
stretch

=
unsafe | (en-US)
safe

=
center | (en-US)
start | (en-US)
end | (en-US)
flex-start | (en-US)
flex-end

Пример

CSS

#container  height: 200px; width: 240px; align-content: center; /* Can be changed in the live sample */ background-color: #8c8c8c; > .flex  display: flex; flex-wrap: wrap; > .grid  display: grid; grid-template-columns: repeat(auto-fill, 50px); > div > div  box-sizing: border-box; border: 2px solid #8c8c8c; width: 50px; display: flex; align-items: center; justify-content: center; > #item1  background-color: #8cffa0; min-height: 30px; > #item2  background-color: #a0c8ff; min-height: 50px; > #item3  background-color: #ffa08c; min-height: 40px; > #item4  background-color: #ffff8c; min-height: 60px; > #item5  background-color: #ff8cff; min-height: 70px; > #item6  background-color: #8cffff; min-height: 50px; font-size: 30px; > select  font-size: 16px; > .row  margin-top: 10px; > 

HTML

div id="container" class="flex"> div id="item1">1div> div id="item2">2div> div id="item3">3div> div id="item4">4div> div id="item5">5div> div id="item6">6div> div> div class="row"> label for="display">display: label> select id="display"> option value="flex">flexoption> option value="grid">gridoption> select> div> div class="row"> label for="values">align-content: label> select id="values"> option value="normal">normaloption> option value="stretch">stretchoption> option value="flex-start">flex-startoption> option value="flex-end">flex-endoption> option value="center" selected>centeroption> option value="space-between">space-betweenoption> option value="space-around">space-aroundoption> option value="space-evenly">space-evenlyoption> option value="start">startoption> option value="end">endoption> option value="left">leftoption> option value="right">rightoption> option value="baseline">baselineoption> option value="first baseline">first baselineoption> option value="last baseline">last baselineoption> option value="safe center">safe centeroption> option value="unsafe center">unsafe centeroption> option value="safe right">safe rightoption> option value="unsafe right">unsafe rightoption> option value="safe end">safe endoption> option value="unsafe end">unsafe endoption> option value="safe flex-end">safe flex-endoption> option value="unsafe flex-end">unsafe flex-endoption> select> div> 
var values = document.getElementById("values"); var display = document.getElementById("display"); var container = document.getElementById("container"); values.addEventListener("change", function (evt)  container.style.alignContent = evt.target.value; >); display.addEventListener("change", function (evt)  container.className = evt.target.value; >); 

The Xamarin.Forms FlexLayout

Новый Xamarin.Forms FlexLayout в Xamarin.Forms версии 3.0. Он основан на модуле css Flexible Box Layout Module, обычно известном как гибкий макет или flex-box, так называемый, потому что он включает множество гибких параметров для размещения дочерних элементов в макете.

FlexLayout похож на в Xamarin.Forms StackLayout том, что может расположить дочерние элементы по горизонтали и вертикали в стеке. FlexLayout Однако объект также может упаковать свои дочерние элементы, если их слишком много, чтобы поместиться в одну строку или столбец, а также имеет множество вариантов ориентации, выравнивания и адаптации к различным размерам экрана.

FlexLayout является производным от Layout и наследует свойство Children от типа IList .

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

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

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

Использование FlexLayout для простого стека

На странице Простой стек показано, как FlexLayout можно заменить , но с более простой StackLayout разметкой. Все в этом примере определяется на странице XAML. содержит FlexLayout четыре дочерних элемента:

Вот эта страница, запущенная в iOS, Android и универсальная платформа Windows:

Страница простого стека

В файле SimpleStackPage.xaml отображаются три свойства FlexLayout :

  • Свойству Direction присваивается значение перечисления FlexDirection . Значение по умолчанию — Row . Если задать для свойства значение , Column дочерние элементы FlexLayout объекта будут упорядочены в одном столбце элементов. При упорядочении элементов в FlexLayout столбце FlexLayout считается, что имеет вертикальную ось main и горизонтальную поперечное поперечное оси.
  • Свойство AlignItems имеет тип FlexAlignItems и указывает, как элементы выравниваются по оси. Параметр Center приводит к тому, что каждый элемент будет выцентрирован по горизонтали. Если для этой задачи использовался StackLayout , а не FlexLayout , вы бы по центру всех элементов, назначив HorizontalOptions свойству каждого элемента Center значение . Свойство HorizontalOptions не работает для дочерних FlexLayout элементов , но одно AlignItems свойство достигает той же цели. При необходимости можно использовать присоединенное AlignSelf привязываемое свойство, чтобы переопределить AlignItems свойство для отдельных элементов:

Эти FlexLayout свойства более подробно рассматриваются в разделе Привязываемые свойства ниже.

Использование FlexLayout для упаковки элементов

На странице Обтекание фотографиями примера FlexLayoutDemos показано, как FlexLayout можно переносить дочерние элементы в дополнительные строки или столбцы. Xaml-файл создает FlexLayout экземпляр и назначает ему два свойства:

Свойство Direction этого FlexLayout объекта не задано, поэтому имеет значение Row по умолчанию , что означает, что дочерние элементы расположены в строках, а ось main является горизонтальной.

Свойство Wrap имеет тип FlexWrap перечисления . Если в строке слишком много элементов, это значение свойства приводит к переносу элементов в следующую строку.

Обратите внимание, что FlexLayout является дочерним элементом . ScrollView Если на странице слишком много строк, свойство ScrollView по умолчанию Orientation имеет значение Vertical и разрешает вертикальную прокрутку.

Свойство JustifyContent выделяет оставшееся пространство на оси main (горизонтальной), чтобы каждый элемент был окружен одинаковым объемом пустого пространства.

Файл кода программной части обращается к коллекции примеров фотографий и добавляет их в Children коллекцию FlexLayout :

public partial class PhotoWrappingPage : ContentPage < // Class for deserializing JSON list of sample bitmaps [DataContract] class ImageList < [DataMember(Name = "photos")] public ListPhotos = null; > public PhotoWrappingPage () < InitializeComponent (); LoadBitmapCollection(); >async void LoadBitmapCollection() < using (WebClient webClient = new WebClient()) < try < // Download the list of stock photos Uri uri = new Uri("https://raw.githubusercontent.com/xamarin/docs-archive/master/Images/stock/small/stock.json"); byte[] data = await webClient.DownloadDataTaskAsync(uri); // Convert to a Stream object using (Stream stream = new MemoryStream(data)) < // Deserialize the JSON into an ImageList object var jsonSerializer = new DataContractJsonSerializer(typeof(ImageList)); ImageList imageList = (ImageList)jsonSerializer.ReadObject(stream); // Create an Image object for each bitmap foreach (string filepath in imageList.Photos) < Image image = new Image < Source = ImageSource.FromUri(new Uri(filepath)) >; flexLayout.Children.Add(image); > > > catch < flexLayout.Children.Add(new Label < Text = "Cannot access list of bitmap files" >); > > activityIndicator.IsRunning = false; activityIndicator.IsVisible = false; > > 

Вот запущенная программа, постепенно прокручиваемая сверху вниз:

Страница обтекания фотографиями Страница

Макет страницы с помощью FlexLayout

Существует стандартный макет в веб-дизайне называется святой Грааль , потому что это макетный формат, который очень желателен, но часто трудно реализовать с совершенством. Макет состоит из верхнего колонтитула в верхней части страницы и нижнего колонтитула, которые распространяются на всю ширину страницы. В центре страницы находится main содержимого, но часто с меню столбцов слева от содержимого и дополнительной информацией (иногда называемой областью в сторону) справа. В разделе 5.4.1 спецификации css Flexible Box Layout описано, как можно реализовать макет святого Грааля с помощью гибкой коробки.

На странице Макет Святого Грааля в примере FlexLayoutDemos показана простая реализация этого макета, вложенного FlexLayout в другой. Так как эта страница предназначена для телефона в книжном режиме, области слева и справа от области содержимого имеют ширину всего 50 пикселей:

Страница макета Святого Грааля

Навигация и области в сторону отображаются с помощью BoxView слева и справа.

Первый FlexLayout в XAML-файле имеет вертикальную ось main и содержит три дочерних элемента, расположенных в столбце. Это верхний колонтитул, текст страницы и нижний колонтитул. Вложенный объект имеет горизонтальную ось main с тремя дочерними элементами FlexLayout , расположенными в строке.

В этой программе показаны три присоединенных привязываемых свойства:

  • Присоединенное Order привязываемое свойство задается в первом BoxView объекте . Это свойство является целым числом со значением по умолчанию 0. Это свойство можно использовать для изменения порядка макета. Как правило, разработчики предпочитают, чтобы содержимое страницы отображалось в разметке перед элементами навигации и в сторону. Order Если задать для свойства на первом BoxView элементе значение, меньшее, чем у других его одноуровневых элементов, оно будет отображаться в качестве первого элемента в строке. Аналогичным образом можно убедиться, что элемент отображается последним, задав Order для свойства значение, большее, чем его одноуровневые элементы.
  • Присоединенное Basis привязываемое свойство задается для двух BoxView элементов, чтобы присвоить им ширину 50 пикселей. Это свойство имеет тип FlexBasis , структуру, которая определяет статическое свойство типа FlexBasis с именем Auto , которое является значением по умолчанию. С помощью Basis можно указать размер пикселя или процент, указывающий, сколько места занимает элемент на оси main. Он называется базисом , так как указывает размер элемента, который является основой для всех последующих макетов.
  • Свойство Grow задается для вложенного Layout объекта и дочернего Label объекта, представляющего содержимое. Это свойство имеет тип float и имеет значение по умолчанию 0. Если задано положительное значение, все оставшееся пространство вдоль оси main выделяется этому элементу и элементам уровня с положительными значениями Grow . Пространство выделяется пропорционально значениям, как в спецификации star в Grid . Первое Grow присоединенное свойство задается во вложенном FlexLayout объекте , указывая, что оно FlexLayout занимает все неиспользуемое вертикальное пространство во внешнем FlexLayout . Второе Grow присоединенное свойство задается для объекта , Label представляющего содержимое, указывая, что это содержимое будет занимать все неиспользуемое горизонтальное пространство во внутренней FlexLayout области . Существует также аналогичное Shrink присоединенное привязываемое свойство, которое можно использовать, если размер дочерних элементов превышает размер FlexLayout , но упаковка не требуется.

Элементы каталога с помощью FlexLayout

Страница Элементы каталога в примере FlexLayoutDemos похожа на пример 1 в разделе 1.1 спецификации CSS Flex Layout Box , за исключением того, что на ней отображается горизонтально прокручиваемая серия изображений и описания трех обезьян:

Каждая из трех обезьян содержится в объекте FlexLayout Frame , который имеет явную высоту и ширину, а также является дочерним элементом большего FlexLayout размера . В этом XAML-файле большинство свойств дочерних FlexLayout элементов указываются в стилях, все из которых, кроме одного, являются неявным стилем:

            " />    " WidthRequest="180" HeightRequest="180" />     " />   " WidthRequest="240" HeightRequest="180" />     " />    " WidthRequest="180" HeightRequest="180" />       

Неявный стиль для Image включает параметры двух присоединенных привязываемых свойств : Flexlayout

Значение Order –1 приводит к тому, что Image элемент отображается первым во всех вложенных FlexLayout представлениях независимо от его положения в коллекции дочерних элементов. Свойство AlignSelf Center объекта приводит к тому, Image что объект будет центрирован в . FlexLayout Это переопределяет значение AlignItems свойства , которое имеет значение Stretch по умолчанию , что означает, что дочерние Label элементы и Button растягиваются до полной FlexLayout ширины .

В каждом из трех FlexLayout представлений пустое Label значение предшествует Button , но имеет Grow значение 1. Это означает, что все дополнительное пространство по вертикали выделяется этому пустому Label элементу , который фактически толкает Button на дно.

Подробные сведения о привязываемых свойствах

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

Вы можете поэкспериментировать с оставшимися привязываемыми свойствами на странице Эксперимент примера FlexLayoutDemos . Эта страница позволяет добавлять или удалять дочерние FlexLayout элементы из и задавать сочетания пяти привязываемых свойств. Все дочерние FlexLayout элементы представляют собой Label представления различных цветов и размеров, для свойства которых задано число, Text соответствующее его положению Children в коллекции.

При запуске программы в пяти Picker представлениях отображаются значения по умолчанию для этих пяти FlexLayout свойств. В FlexLayout нижней части экрана содержится три дочерних элемента:

Страница эксперимента: по умолчанию

Каждое из представлений Label имеет серый фон, показывающий пространство, Label выделенное FlexLayout для этого в . Фоном FlexLayout самого является Алиса Блю. Он занимает всю нижнюю область страницы, за исключением небольшого поля слева и справа.

Свойство Direction

Свойство Direction имеет тип FlexDirection , перечисление с четырьмя элементами:

  • Column
  • ColumnReverse (или «обратный столбец» в XAML)
  • Row (стандартный вариант);
  • RowReverse (или «обратная строка» в XAML)

В XAML можно указать значение этого свойства, используя имена членов перечисления в нижнем, верхнем или смешанном регистре, а также две дополнительные строки, показанные в скобках, которые совпадают с индикаторами CSS. (Строки column-reverse и row-reverse определяются в FlexDirectionTypeConverter классе, используемом анализатором XAML.)

Ниже приведена страница «Эксперимент «, показывающая (слева направо) Row направление, Column направление и ColumnReverse направление:

Страница эксперимент: направление

Обратите внимание, что для Reverse параметров элементы начинаются справа или внизу.

Свойство Wrap

Свойство Wrap имеет тип FlexWrap , перечисление с тремя элементами:

  • NoWrap (стандартный вариант);
  • Wrap
  • Reverse (или «обратный перенос» в XAML)

Слева направо на этих экранах отображаются NoWrap параметры и Reverse Wrap для 12 дочерних элементов:

Страница эксперимента: перенос

Если свойству Wrap присвоено значение NoWrap и ось main ограничена (как в этой программе), а ось main не имеет ширины или недостаточно высокой ширины, чтобы соответствовать всем дочерним элементам, FlexLayout выполняется попытка уменьшить элементы, как показано на снимке экрана iOS. Вы можете управлять сжатием элементов с помощью присоединенного Shrink привязываемого свойства.

Свойство JustifyContent

Свойство JustifyContent имеет тип FlexJustify , перечисление с шестью элементами:

  • Start (или «flex-start» в XAML), значение по умолчанию
  • Center
  • End (или «flex-end» в XAML)
  • SpaceBetween (или «пробел между» в XAML)
  • SpaceAround (или «вокруг пространства» в XAML)
  • SpaceEvenly

Это свойство указывает, как элементы размещаются на оси main, которая является горизонтальной осью в этом примере:

Страница эксперимента: оправдание содержимого

На всех трех снимках экрана свойству Wrap присвоено значение Wrap . Значение Start по умолчанию отображается на предыдущем снимке экрана Android. На снимку экрана iOS показан Center параметр: все элементы перемещаются в центр. Три других параметра, начинающиеся со слова Space , выделяют дополнительное пространство, не занимаемое элементами. SpaceBetween распределяет пространство между элементами поровну; SpaceAround Помещает одинаковое пространство вокруг каждого элемента, в то время как SpaceEvenly помещает одинаковое пространство между каждым элементом и перед первым элементом и после последнего элемента в строке.

Свойство AlignItems

Свойство AlignItems имеет тип FlexAlignItems , перечисление с четырьмя элементами:

  • Stretch (стандартный вариант);
  • Center
  • Start (или «flex-start» в XAML)
  • End (или «flex-end» в XAML)

Это одно из двух свойств (другое — AlignContent ), которое указывает, как дочерние элементы выравниваются по оси. В каждой строке дочерние элементы растягиваются (как показано на предыдущем снимке экрана) или выравниваются по началу, центру или концу каждого элемента, как показано на следующих трех снимках экрана:

Страница эксперимента: выравнивание элементов

На снимке экрана iOS выровнены верхние части всех дочерних элементов. На снимках экрана Android элементы расположены по вертикали в зависимости от самого высокого дочернего элемента. На снимке экрана UWP днища всех элементов выровнены.

Для любого отдельного элемента AlignItems параметр можно переопределить присоединенным AlignSelf привязываемым свойством.

Свойство AlignContent

Свойство AlignContent имеет тип FlexAlignContent , перечисление с семью элементами:

  • Stretch (стандартный вариант);
  • Center
  • Start (или «flex-start» в XAML)
  • End (или «flex-end» в XAML)
  • SpaceBetween (или «пробел между» в XAML)
  • SpaceAround (или «вокруг пространства» в XAML)
  • SpaceEvenly

Как и AlignItems , AlignContent свойство также выравнивает дочерние элементы по оси, но влияет на целые строки или столбцы:

Страница

На снимке экрана iOS обе строки находятся в верхней части экрана; на снимке экрана Android они в центре; и на снимке экрана UWP они в нижней части. Строки также могут быть разделены различными способами:

Страница эксперимента: выровнять содержимое 2

Не оказывает никакого AlignContent влияния, если имеется только одна строка или столбец.

Подробные сведения о присоединенных привязываемых свойствах

FlexLayout определяет пять присоединенных привязываемых свойств. Эти свойства задаются для дочерних элементов FlexLayout и относятся только к этому конкретному дочернему элементу.

Свойство AlignSelf

Присоединенное AlignSelf привязываемое свойство имеет тип FlexAlignSelf перечисления с пятью элементами:

  • Auto (стандартный вариант);
  • Stretch
  • Center
  • Start (или «flex-start» в XAML)
  • End (или «flex-end» в XAML)

Для любого отдельного дочернего FlexLayout элемента , этот параметр свойства переопределяет AlignItems свойство, заданное для FlexLayout самого объекта . Значение Auto по умолчанию означает использование AlignItems параметра.

Для элемента с Label именем label (или примером) можно задать свойство в коде AlignSelf следующим образом:

FlexLayout.SetAlignSelf(label, FlexAlignSelf.Center); 

Обратите внимание, что нет ссылки на FlexLayout родительский Label элемент . В XAML свойство задается следующим образом:

Свойство Order

Свойство Order имеет тип int . Значение по умолчанию — 0.

Свойство Order позволяет изменить порядок упорядочения дочерних FlexLayout элементов . Как правило, дочерние элементы FlexLayout упорядочены в том же порядке, что и в Children коллекции. Этот порядок можно переопределить, задав Order присоединенному привязываемому свойству ненулевое целочисленное значение для одного или нескольких дочерних элементов. FlexLayout Затем упорядочивает свои дочерние элементы на основе параметров свойства для каждого дочернего Order элемента, но дочерние элементы с тем же Order параметром упорядочивается в порядке, в который они отображаются в Children коллекции.

Свойство Basis

Присоединенное Basis привязываемое свойство указывает объем пространства, выделенного дочернему объекту FlexLayout на оси main. Размер, заданный свойством Basis , — это размер вдоль main оси родительского FlexLayout объекта . Таким образом, указывает ширину дочернего элемента, Basis когда дочерние элементы расположены в строках, или высоту, когда дочерние элементы расположены в столбцах.

Свойство Basis имеет тип FlexBasis , структуру. Размер можно указать в независимых от устройства единицах или в процентах от размера FlexLayout . Значением свойства по умолчанию Basis является статическое свойство FlexBasis.Auto , которое означает, что используется запрошенная ширина или высота дочернего элемента.

В коде Basis для именованного Label label свойства можно задать 40 независимых от устройства единиц, как показано ниже:

FlexLayout.SetBasis(label, new FlexBasis(40, false)); 

Второй аргумент конструктора FlexBasis называется isRelative и указывает, является ли размер относительным ( true ) или абсолютным ( false ). Аргумент имеет значение false по умолчанию , поэтому можно также использовать следующий код:

FlexLayout.SetBasis(label, new FlexBasis(40)); 

Определяется неявное преобразование из float в FlexBasis , что позволяет еще больше упростить его:

FlexLayout.SetBasis(label, 40); 

Вы можете задать размер 25 % родительского FlexLayout элемента следующим образом:

FlexLayout.SetBasis(label, new FlexBasis(0.25f, true)); 

Это дробное значение должно находиться в диапазоне от 0 до 1.

В XAML можно использовать число для размера в независимых от устройства единицах:

Или можно указать процент в диапазоне от 0% до 100%:

Страница Базовый эксперимент примера FlexLayoutDemos позволяет поэкспериментировать со свойством Basis . На странице отображается заключенный в оболочку столбец из пяти Label элементов с чередующимися цветами фона и переднего плана. Два Slider элемента позволяют указать Basis значения для второго и четвертого Label :

Страница

На снимке экрана iOS слева показаны высоты двух Label элементов в независимых от устройства единицах. На экране Android отображается заданная высота, которая составляет часть общей высоты FlexLayout . Basis Если задано значение 100 %, то дочерний элемент является высотой FlexLayout , и будет переноситься к следующему столбцу и занимать всю высоту этого столбца, как показано на снимке экрана UWP: это выглядит так, как будто пять дочерних элементов расположены в ряд, но на самом деле они расположены в пяти столбцах.

Свойство Grow

Присоединенное Grow привязываемое свойство имеет тип int . Значение по умолчанию — 0, а значение должно быть больше или равно 0.

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

На странице Grow Experiment пять Label элементов чередующихся цветов расположены в столбце, а два Slider элемента позволяют настроить Grow свойство второго и четвертого Label . На снимку экрана iOS в левом углу показаны свойства по умолчанию Grow 0:

Страница

Если одному дочернему элементу присваивается положительное Grow значение, то он занимает все оставшееся пространство, как показано на снимках экрана Android. Это пространство также можно выделить между двумя или более дочерними элементами. На снимке экрана UWP свойству Grow второго Label задается значение 0,5, а свойству Grow четвертого Label — 1,5, что дает четвертому Label в три раза больше оставшееся пространство, чем второму Label .

Способ использования этого пространства дочерним представлением зависит от конкретного типа дочернего элемента. Label Для текста можно разместить в общем пространстве Label объекта с помощью свойств HorizontalTextAlignment и VerticalTextAlignment .

Свойство Shrink

Присоединенное Shrink привязываемое свойство имеет тип int . Значение по умолчанию — 1, а значение должно быть больше или равно 0.

Свойство Shrink играет роль, если свойству Wrap присвоено значение NoWrap , а ширина агрегированной строки дочерних элементов больше ширины FlexLayout , или совокупная высота одного столбца дочерних элементов больше высоты FlexLayout . Обычно FlexLayout отображает эти дочерние элементы путем ограничения их размеров. Свойство Shrink может указать, какие дочерние элементы имеют приоритет при отображении в полном размере.

На странице Эксперимент сжатия создается FlexLayout с одной строкой из пяти Label дочерних элементов, для которых требуется больше места, FlexLayout чем ширина. На снимку экрана iOS слева показаны все Label элементы со значениями по умолчанию 1:

Страница

На снимке экрана Shrink Android для второго Label значения задано значение 0 и Label отображается в полной ширине. Кроме того, четвертому Label Shrink присваивается значение, превышающее единицы, и оно сократилось. На снимке экрана UWP показано, что обоим Label элементам присваивается Shrink значение 0, чтобы они могли отображаться в полном размере, если это возможно.

Значения и Shrink можно задать в Grow ситуациях, когда совокупные дочерние размеры иногда могут быть меньше, а иногда и больше размера FlexLayout .

Стилизация CSS с помощью FlexLayout

Вы можете использовать функцию стилей CSS , представленную в Xamarin.Forms версии 3.0, в связи с FlexLayout . Страница Элементы каталога CSS примера FlexLayoutDemos дублирует макет страницы «Элементы каталога «, но с таблицей стилей CSS для многих стилей:

Исходный файл CatalogItemsPage.xaml содержит пять Style определений в разделе Resources с 15 Setter объектами. В файле CssCatalogItemsPage.xaml , который был сокращен до двух Style определений с четырьмя Setter объектами. Эти стили дополняют таблицу стилей CSS для свойств, которые Xamarin.Forms в настоящее время не поддерживает функция стилей CSS:

Таблица стилей CSS указана в первой строке Resources раздела:

Обратите внимание, что два элемента в каждом из трех элементов включают StyleClass параметры:

Они ссылаются на селекторы в таблице стилей CatalogItemsStyles.css :

frame < width: 300; height: 480; background-color: lightyellow; margin: 10; >label < margin: 4 0; >label.header < margin: 8 0; font-size: large; color: blue; >label.empty < flex-grow: 1; >image < height: 180; order: -1; align-self: center; >button

Здесь приведены ссылки на несколько FlexLayout присоединенных привязываемых свойств. В селекторе label.empty вы увидите flex-grow атрибут , который стили пустого Label стиля, чтобы предоставить пустое пространство над Button . image Селектор содержит order атрибут и align-self атрибут, оба из которых соответствуют FlexLayout присоединенным привязываемым свойствам.

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

FlexLayout с Xamarin.University

Xamarin.Forms Видео о гибком макете 3.0

Связанные ссылки

Flex

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

На этой странице

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

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

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

div class="d-flex p-2 bd-highlight">Я контейнер Flexbox!div>

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

div class="d-inline-flex p-2 bd-highlight">Я встроенный контейнер Flexbox!div>

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

  • .d-flex
  • .d-inline-flex
  • .d-sm-flex
  • .d-sm-inline-flex
  • .d-md-flex
  • .d-md-inline-flex
  • .d-lg-flex
  • .d-lg-inline-flex
  • .d-xl-flex
  • .d-xl-inline-flex
  • .d-xxl-flex
  • .d-xxl-inline-flex

Направление

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

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

Флекс элемент 1
Флекс элемент 2
Флекс элемент 3
Флекс элемент 1
Флекс элемент 2
Флекс элемент 3

div class="d-flex flex-row bd-highlight mb-3"> div class="p-2 bd-highlight">Флекс элемент 1div> div class="p-2 bd-highlight">Флекс элемент 2div> div class="p-2 bd-highlight">Флекс элемент 3div> div> div class="d-flex flex-row-reverse bd-highlight"> div class="p-2 bd-highlight">Флекс элемент 1div> div class="p-2 bd-highlight">Флекс элемент 2div> div class="p-2 bd-highlight">Флекс элемент 3div> div>

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

Флекс элемент 1
Флекс элемент 2
Флекс элемент 3
Флекс элемент 1
Флекс элемент 2
Флекс элемент 3

div class="d-flex flex-column bd-highlight mb-3"> div class="p-2 bd-highlight">Флекс элемент 1div> div class="p-2 bd-highlight">Флекс элемент 2div> div class="p-2 bd-highlight">Флекс элемент 3div> div> div class="d-flex flex-column-reverse bd-highlight"> div class="p-2 bd-highlight">Флекс элемент 1div> div class="p-2 bd-highlight">Флекс элемент 2div> div class="p-2 bd-highlight">Флекс элемент 3div> div>

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

  • .flex-row
  • .flex-row-reverse
  • .flex-column
  • .flex-column-reverse
  • .flex-sm-row
  • .flex-sm-row-reverse
  • .flex-sm-column
  • .flex-sm-column-reverse
  • .flex-md-row
  • .flex-md-row-reverse
  • .flex-md-column
  • .flex-md-column-reverse
  • .flex-lg-row
  • .flex-lg-row-reverse
  • .flex-lg-column
  • .flex-lg-column-reverse
  • .flex-xl-row
  • .flex-xl-row-reverse
  • .flex-xl-column
  • .flex-xl-column-reverse
  • .flex-xxl-row
  • .flex-xxl-row-reverse
  • .flex-xxl-column
  • .flex-xxl-column-reverse

Выравнивание содержимого

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

Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент

div class="d-flex justify-content-start">. div> div class="d-flex justify-content-end">. div> div class="d-flex justify-content-center">. div> div class="d-flex justify-content-between">. div> div class="d-flex justify-content-around">. div> div class="d-flex justify-content-evenly">. div> 

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

  • .justify-content-start
  • .justify-content-end
  • .justify-content-center
  • .justify-content-between
  • .justify-content-around
  • .justify-content-evenly
  • .justify-content-sm-start
  • .justify-content-sm-end
  • .justify-content-sm-center
  • .justify-content-sm-between
  • .justify-content-sm-around
  • .justify-content-sm-evenly
  • .justify-content-md-start
  • .justify-content-md-end
  • .justify-content-md-center
  • .justify-content-md-between
  • .justify-content-md-around
  • .justify-content-md-evenly
  • .justify-content-lg-start
  • .justify-content-lg-end
  • .justify-content-lg-center
  • .justify-content-lg-between
  • .justify-content-lg-around
  • .justify-content-lg-evenly
  • .justify-content-xl-start
  • .justify-content-xl-end
  • .justify-content-xl-center
  • .justify-content-xl-between
  • .justify-content-xl-around
  • .justify-content-xl-evenly
  • .justify-content-xxl-start
  • .justify-content-xxl-end
  • .justify-content-xxl-center
  • .justify-content-xxl-between
  • .justify-content-xxl-around
  • .justify-content-xxl-evenly

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

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

Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент

div class="d-flex align-items-start">. div> div class="d-flex align-items-end">. div> div class="d-flex align-items-center">. div> div class="d-flex align-items-baseline">. div> div class="d-flex align-items-stretch">. div> 

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

  • .align-items-start
  • .align-items-end
  • .align-items-center
  • .align-items-baseline
  • .align-items-stretch
  • .align-items-sm-start
  • .align-items-sm-end
  • .align-items-sm-center
  • .align-items-sm-baseline
  • .align-items-sm-stretch
  • .align-items-md-start
  • .align-items-md-end
  • .align-items-md-center
  • .align-items-md-baseline
  • .align-items-md-stretch
  • .align-items-lg-start
  • .align-items-lg-end
  • .align-items-lg-center
  • .align-items-lg-baseline
  • .align-items-lg-stretch
  • .align-items-xl-start
  • .align-items-xl-end
  • .align-items-xl-center
  • .align-items-xl-baseline
  • .align-items-xl-stretch
  • .align-items-xxl-start
  • .align-items-xxl-end
  • .align-items-xxl-center
  • .align-items-xxl-baseline
  • .align-items-xxl-stretch

Выравнивание себя

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

Флекс элемент
Выровненный Флекс элемент
Флекс элемент
Флекс элемент
Выровненный Флекс элемент
Флекс элемент
Флекс элемент
Выровненный Флекс элемент
Флекс элемент
Флекс элемент
Выровненный Флекс элемент
Флекс элемент
Флекс элемент
Выровненный Флекс элемент
Флекс элемент

div class="align-self-start">Выровненный Флекс элементdiv> div class="align-self-end">Выровненный Флекс элементdiv> div class="align-self-center">Выровненный Флекс элементdiv> div class="align-self-baseline">Выровненный Флекс элементdiv> div class="align-self-stretch">Выровненный Флекс элементdiv> 

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

  • .align-self-start
  • .align-self-end
  • .align-self-center
  • .align-self-baseline
  • .align-self-stretch
  • .align-self-sm-start
  • .align-self-sm-end
  • .align-self-sm-center
  • .align-self-sm-baseline
  • .align-self-sm-stretch
  • .align-self-md-start
  • .align-self-md-end
  • .align-self-md-center
  • .align-self-md-baseline
  • .align-self-md-stretch
  • .align-self-lg-start
  • .align-self-lg-end
  • .align-self-lg-center
  • .align-self-lg-baseline
  • .align-self-lg-stretch
  • .align-self-xl-start
  • .align-self-xl-end
  • .align-self-xl-center
  • .align-self-xl-baseline
  • .align-self-xl-stretch
  • .align-self-xxl-start
  • .align-self-xxl-end
  • .align-self-xxl-center
  • .align-self-xxl-baseline
  • .align-self-xxl-stretch

Заполнение

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

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

div class="d-flex bd-highlight"> div class="p-2 flex-fill bd-highlight">Флекс элемент с большим количеством контентаdiv> div class="p-2 flex-fill bd-highlight">Флекс элементdiv> div class="p-2 flex-fill bd-highlight">Флекс элементdiv> div>

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

  • .flex-fill
  • .flex-sm-fill
  • .flex-md-fill
  • .flex-lg-fill
  • .flex-xl-fill
  • .flex-xxl-fill

Увеличиваться и сжимайся

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

Флекс элемент
Флекс элемент
Third Флекс элемент

div class="d-flex bd-highlight"> div class="p-2 flex-grow-1 bd-highlight">Флекс элементdiv> div class="p-2 bd-highlight">Флекс элементdiv> div class="p-2 bd-highlight">Third Флекс элементdiv> div>

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

Флекс элемент
Флекс элемент

div class="d-flex bd-highlight"> div class="p-2 w-100 bd-highlight">Флекс элементdiv> div class="p-2 flex-shrink-1 bd-highlight">Флекс элементdiv> div>

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

Автоматические поля

Flexbox может делать довольно удивительные вещи, когда Вы смешиваете выравнивание гибкости с автоматическими полями. Ниже показаны три примера управления гибкими элементами через автоматические поля: по умолчанию (без автоматического поля), перемещение двух элементов вправо ( .me-auto ) и перемещение двух элементов влево ( .ms-auto ) .

Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент

div class="d-flex bd-highlight mb-3"> div class="p-2 bd-highlight">Флекс элементdiv> div class="p-2 bd-highlight">Флекс элементdiv> div class="p-2 bd-highlight">Флекс элементdiv> div> div class="d-flex bd-highlight mb-3"> div class="me-auto p-2 bd-highlight">Флекс элементdiv> div class="p-2 bd-highlight">Флекс элементdiv> div class="p-2 bd-highlight">Флекс элементdiv> div> div class="d-flex bd-highlight mb-3"> div class="p-2 bd-highlight">Флекс элементdiv> div class="p-2 bd-highlight">Флекс элементdiv> div class="ms-auto p-2 bd-highlight">Флекс элементdiv> div>

С помощью align-items

Вертикально переместите один элемент Флекс вверх или вниз контейнера, смешав align-items , flex-direction: column и margin-top: auto или margin-bottom: auto .

Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент

div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;"> div class="mb-auto p-2 bd-highlight">Флекс элементdiv> div class="p-2 bd-highlight">Флекс элементdiv> div class="p-2 bd-highlight">Флекс элементdiv> div> div class="d-flex align-items-end flex-column bd-highlight mb-3" style="height: 200px;"> div class="p-2 bd-highlight">Флекс элементdiv> div class="p-2 bd-highlight">Флекс элементdiv> div class="mt-auto p-2 bd-highlight">Флекс элементdiv> div>

Обертка

Измените способ обертки элементов Флекс в гибкий контейнер. Выберите полное отсутствие переноса (по умолчанию в браузере) с помощью .flex-nowrap , обертывание с помощью .flex-wrap или обратное обертывание с помощью .flex-wrap-reverse .

Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент

div class="d-flex flex-nowrap"> . div> 

Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент

div class="d-flex flex-wrap"> . div> 

Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент

div class="d-flex flex-wrap-reverse"> . div> 

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

  • .flex-nowrap
  • .flex-wrap
  • .flex-wrap-reverse
  • .flex-sm-nowrap
  • .flex-sm-wrap
  • .flex-sm-wrap-reverse
  • .flex-md-nowrap
  • .flex-md-wrap
  • .flex-md-wrap-reverse
  • .flex-lg-nowrap
  • .flex-lg-wrap
  • .flex-lg-wrap-reverse
  • .flex-xl-nowrap
  • .flex-xl-wrap
  • .flex-xl-wrap-reverse
  • .flex-xxl-nowrap
  • .flex-xxl-wrap
  • .flex-xxl-wrap-reverse

Порядок

Измените визуальный порядок определенных элементов Флекс с помощью нескольких утилит order . Мы предоставляем только варианты создания элемента первым или последним, а также сброс для использования порядка DOM. Поскольку order принимает любое целочисленное значение от 0 до 5, добавьте собственный CSS для любых дополнительных значений.

First Флекс элемент
Second Флекс элемент
Third Флекс элемент

div class="d-flex flex-nowrap bd-highlight"> div class="order-3 p-2 bd-highlight">First Флекс элементdiv> div class="order-2 p-2 bd-highlight">Second Флекс элементdiv> div class="order-1 p-2 bd-highlight">Third Флекс элементdiv> div>

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

  • .order-0
  • .order-1
  • .order-2
  • .order-3
  • .order-4
  • .order-5
  • .order-sm-0
  • .order-sm-1
  • .order-sm-2
  • .order-sm-3
  • .order-sm-4
  • .order-sm-5
  • .order-md-0
  • .order-md-1
  • .order-md-2
  • .order-md-3
  • .order-md-4
  • .order-md-5
  • .order-lg-0
  • .order-lg-1
  • .order-lg-2
  • .order-lg-3
  • .order-lg-4
  • .order-lg-5
  • .order-xl-0
  • .order-xl-1
  • .order-xl-2
  • .order-xl-3
  • .order-xl-4
  • .order-xl-5
  • .order-xxl-0
  • .order-xxl-1
  • .order-xxl-2
  • .order-xxl-3
  • .order-xxl-4
  • .order-xxl-5

Кроме того, существуют также адаптивные классы .order-first и .order-last , которые изменяют order элемента, применяя order: -1 и order: 6 соответственно.

  • .order-first
  • .order-last
  • .order-sm-first
  • .order-sm-last
  • .order-md-first
  • .order-md-last
  • .order-lg-first
  • .order-lg-last
  • .order-xl-first
  • .order-xl-last
  • .order-xxl-first
  • .order-xxl-last

Выравнивание контента

Используйте утилиты align-content на контейнерах flexbox для выравнивания элементов Флекс вместе по поперечной оси. Выберите start (по умолчанию для браузера), end , center , between , around или stretch . Чтобы продемонстрировать эти утилиты, мы ввели в действие flex-wrap: wrap и увеличили количество элементов Флекс.

Внимание! Это свойство не влияет на отдельные строки элементов Флекс.

Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент

div class="d-flex align-content-start flex-wrap"> . div> 

Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент

div class="d-flex align-content-end flex-wrap">. div> 

Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент

div class="d-flex align-content-center flex-wrap">. div> 

Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент

div class="d-flex align-content-between flex-wrap">. div> 

Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент

div class="d-flex align-content-around flex-wrap">. div> 

Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент

div class="d-flex align-content-stretch flex-wrap">. div> 

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

  • .align-content-start
  • .align-content-end
  • .align-content-center
  • .align-content-around
  • .align-content-stretch
  • .align-content-sm-start
  • .align-content-sm-end
  • .align-content-sm-center
  • .align-content-sm-around
  • .align-content-sm-stretch
  • .align-content-md-start
  • .align-content-md-end
  • .align-content-md-center
  • .align-content-md-around
  • .align-content-md-stretch
  • .align-content-lg-start
  • .align-content-lg-end
  • .align-content-lg-center
  • .align-content-lg-around
  • .align-content-lg-stretch
  • .align-content-xl-start
  • .align-content-xl-end
  • .align-content-xl-center
  • .align-content-xl-around
  • .align-content-xl-stretch
  • .align-content-xxl-start
  • .align-content-xxl-end
  • .align-content-xxl-center
  • .align-content-xxl-around
  • .align-content-xxl-stretch

Медиа объект

Хотите скопировать компонент мультимедийного объекта из Bootstrap 4? В мгновение ока воссоздайте его с помощью нескольких гибких утилит, которые обеспечивают еще большую гибкость и настройку, чем раньше.

Placeholder

Это какой-то контент из медиа-компонента. Вы можете заменить его любым содержимым и при необходимости отрегулировать его.

div class="d-flex"> div class="flex-shrink-0"> img src=". " alt=". "> div> div class="flex-grow-1 ms-3"> Это какой-то контент из медиа-компонента. Вы можете заменить его любым содержимым и при необходимости отрегулировать его. div> div>

And say you want to vertically center the content next to the image:

Placeholder

Это какой-то контент из медиа-компонента. Вы можете заменить его любым содержимым и при необходимости отрегулировать его.

div class="d-flex align-items-center"> div class="flex-shrink-0"> img src=". " alt=". "> div> div class="flex-grow-1 ms-3"> Это какой-то контент из медиа-компонента. Вы можете заменить его любым содержимым и при необходимости отрегулировать его. div> div>

Sass

API утилит

Утилиты флексбокс объявлены в нашем API утилит в scss/_utilities.scss . Узнайте, как использовать API утилит.

 "flex": ( responsive: true, property: flex, values: (fill: 1 1 auto) ), "flex-direction": ( responsive: true, property: flex-direction, class: flex, values: row column row-reverse column-reverse ), "flex-grow": ( responsive: true, property: flex-grow, class: flex, values: ( grow-0: 0, grow-1: 1, ) ), "flex-shrink": ( responsive: true, property: flex-shrink, class: flex, values: ( shrink-0: 0, shrink-1: 1, ) ), "flex-wrap": ( responsive: true, property: flex-wrap, class: flex, values: wrap nowrap wrap-reverse ), "gap": ( responsive: true, property: gap, class: gap, values: $spacers ), "justify-content": ( responsive: true, property: justify-content, values: ( start: flex-start, end: flex-end, center: center, between: space-between, around: space-around, evenly: space-evenly, ) ), "align-items": ( responsive: true, property: align-items, values: ( start: flex-start, end: flex-end, center: center, baseline: baseline, stretch: stretch, ) ), "align-content": ( responsive: true, property: align-content, values: ( start: flex-start, end: flex-end, center: center, between: space-between, around: space-around, stretch: stretch, ) ), "align-self": ( responsive: true, property: align-self, values: ( auto: auto, start: flex-start, end: flex-end, center: center, baseline: baseline, stretch: stretch, ) ), "order": ( responsive: true, property: order, values: ( first: -1, 0: 0, 1: 1, 2: 2, 3: 3, 4: 4, 5: 5, last: 6, ), ), 
  • Разработан и построен с любовью в мире командой Bootstrap с помощью наших участников.
  • Код под лицензией MIT, документация CC BY 3.0.
  • Текущая версия v5.1.3.

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

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