Flex примеры. Метод позиционирования элементов Flexbox. Направление выстраивания flex-элементов
- Перевод
Об авторе : Рэйчел Эндрю - не только главный редактор журнала Smashing Magazine, но и веб-разработчик, писатель и спикер. Она автор ряда книг, в том числе The New CSS Layout , один из разработчиков системы управления контентом Perch . Пишет о бизнесе и технологиях на своём сайте rachelandrew.co.uk .
Краткое содержание: в этой статье мы рассмотрим свойства выравнивания во Flexbox и некоторые основные правила, как работает выравнивание по основной и поперечной осям.
Значения точно так же работают по вертикали, то есть если flex-direction применяется для column . Правда, у вас в столбце может не оказаться свободного места для распределения, если не добавить высоту или block-size контейнера, как в этом демо .
Выравнивание по осям с помощью align-content
Если в контейнере несколько осей и указано flex-wrap: wrap , то можно использовать align-content для выравнивания строк на поперечной оси. Но требуется дополнительное пространство. В этой демонстрации поперечная ось работает в направлении колонки, и я указала высоту контейнера 60vh . Поскольку это больше, чем необходимо для отображения всех элементов, то появляется свободное пространство по вертикали.Затем я могу применить align-content с любым из значений .
Если в качестве flex-direction указано column , то align-content работает как в следующем примере .
Как и в случае с justify-content , мы работаем с группой строк и распределяем свободное пространство.
Свойство по place-content
В спецификации Box Alignment можно найти свойство place-content . Использование этого свойства означает, что вы одновременно устанавливаете justify-content и align-content . Первое значение - для align-content , второе для justify-content . Если задано только одно значение, то оно применяется к обоим свойствам:Container {
place-content: space-between stretch;
}
Соответствует этому:
Container {
align-content: space-between;
justify-content: stretch;
}
А такой код:
Container {
place-content: space-between;
}
Равноценен следующему:
Container { align-content: space-between; justify-content: space-between; }
Выравнивание по осям с помощью align-items
Теперь мы знаем, что можно выровнять набор элементов или строки как группу. Тем не менее, есть ещё один способ выровнять элементы по отношению друг к другу на поперечной оси. У контейнера есть высота, которая определяется высотой самого высокого элемента.
Как вариант, её можно определить свойством height в контейнере:
Почему элементы растягиваются до размера самого высокого элемента - это потому что начальным значением параметра align-items является stretch . Элементы растягиваются по поперечной оси до размера контейнера в этом направлении.
Обратите внимание, что в многострочном контейнере каждая строка действует как новый контейнер. Самый высокий элемент в этой строке будет определять размер всех элементов в этой строке.
Кроме начального значения stretch , можно присвоить элементам align-items значение flex-start , в этом случае они выравниваются по началу контейнера и больше не растягиваются по высоте.
Значение flex-end перемещает их в конец контейнера по поперечной оси.
Если вы используете значение center , то элементы центрируются относительно друг друга:
Мы также можем выровнять их по базовой линии. Это гарантирует выравнивание текста по одному основанию, в отличие от выравнивания полей вокруг текста.
Все эти варианты можно попробовать в демо .
Индивидуальное выравнивание с помощью align-self
Свойство align-items задаёт выравнивание всех элементов одновременно. В действительности оно устанавливает значения align-self для всех элементов группы. Можно также использовать свойство align-self для любого отдельного элемента, чтобы выровнять его внутри строки и относительно других элементов.В следующем примере в контейнере используется align-items для выравнивания всей группы по центру, но также align-self для первого и последнего элементов.
Почему нет justify-self ?
Часто возникает вопрос, почему невозможно выровнять один элемент или группу элементов по главной оси. Почему во Flexbox нет свойства -self для выравнивания по главной оси? Если вы представите justify-content и align-content как способ распределения пространства, то ответ становится более очевидным. Мы имеем дело с элементами как с группой и размещаем свободное пространство определённым образом: либо в начале, либо в конце группы, либо между элементами.Также может быть полезно подумать, как justify-content и align-content работают в CSS Grid Layout. В Grid эти свойства используются для распределения свободного пространства в grid-контейнере между grid-дорожками . Здесь тоже мы берём группу дорожек - и с помощью этих свойств распределяем между ними свободное пространство. Поскольку мы оперируем в группе и в Grid, и во Flexbox, то не можем взять отдельный элемент и сделать с ним что-то другое. Тем не менее, есть способ получить оформление макета, которое хотят верстальщики, когда говорят о свойстве self на главной оси. Это использование автоматических полей.
Использование автоматических полей на основной оси
Если вы когда-нибудь центрировали блок в CSS (например, враппер для контента главной страницы, установив поля слева и справа в auto), то у вас уже есть некоторый опыт работы с автоматическими полями. Значение auto для полей заполняет максимальное пространство в установленном направлении. Для центрирования блока мы устанавливаем и левое, и правое поля в auto: каждое из них пытается занять как можно больше места, и поэтому помещает наш блок в центр.Автоматические поля очень хорошо работают во Flexbox для выравнивания отдельных элементов или групп элементов на главной оси. В следующем примере показан типичный случай. Есть панель навигации, элементы отображаются в виде строки и используют начальное значение justify-content: start . Я хочу, чтобы последний пункт отображался отдельно от других в конце строки - при условии, что в строке достаточно места для этого.
Берём этот элемент и указываем для свойства margin-left значение auto . Это значит, что поле пытается получить как можно больше места слева от элемента, то есть элемент выталкивается к правой границе.
Если вы используете автоматические поля на главной оси, то justify-content перестанет действовать, так как автоматические поля займут всё пространство, которое в противном случае распределялось бы с помощью justify-content .
Запасное выравнивание
Для каждого метода выравнивания описан запасной вариант - что произойдёт, если заданное выравнивание невозможно. Например, если у вас есть только один элемент в контейнере, а вы указали justify-content: space-between , что должно произойти? В этом случае применяется запасное выравнивание flex-start - один элемент будет выровнен по началу контейнера. В случае justify-content: space-around используется запасное выравнивание center .В текущей спецификации вы не можете изменить запасное выравнивание. Есть примечание к спецификациям , которое допускает возможность указания произвольного запасного варианта в будущих версиях.
Безопасное и небезопасное выравнивание
Недавним дополнением к спецификации Box Alignment стала концепция безопасного и небезопасного выравнивания с использованием ключевых слов safe и unsafe .В следующем коде последний элемент слишком широк для контейнера, а при небезопасном выравнивании и гибком контейнере в левой части страницы элемент обрезается, поскольку переполнение выходит за границы страницы.
Container {
display: flex;
flex-direction: column;
width: 100px;
align-items: unsafe center;
}
.item:last-child {
width: 200px;
}
Безопасное выравнивание предотвращает потерю данных, перемещая переполнение на другую сторону.
Container {
display: flex;
flex-direction: column;
width: 100px;
align-items: safe center;
}
.item:last-child {
width: 200px;
}
Эти ключевые слова пока поддерживаются не всеми браузерами, однако демонстрируют, как спецификации Box Alignment добавляют контроля во Flexbox.
Заключение
Свойства выравнивания начинались со списка в Flexbox, но теперь обзавелись собственной спецификацией и применяются к другим контекстам макетирования. Вот несколько ключевых фактов, которые помогут запомнить их использование во Flexbox:- justify- для основных осей, а align- для поперечных;
- для align-content и justify-content требуется свободное пространство;
- свойства align-content и justify-content применяются к элементам в группе, распределяя пространство между ними. Нельзя указывать выравнивание отдельного элемента, потому что свойство -self отсутствует;
- если хотите выровнять один элемент или разбить группу по основной оси, используйте автоматические поля;
- align-items устанавливает одинаковые свойства align-self для всей группы. Используйте align-self для дочернего элемента группы, чтобы установить ему значение индивидуально.
Теги: Добавить метки
Модуль разметки Flexbox (от английского Flexible Box – гибкий блок ), находящийся на данный момент на этапе «Возможная рекомендация » стандартизации W3C (W3C Candidate Recommendation ) нацелен на обеспечение более эффективного способа разметки, выравнивания и распределения места между элементами в контейнере, даже если их размер неизвестен и/или определяется динамически (вот почему его назвали «гибкий» ).
Основная идея, стоящая за гибкой разметкой – это наделить контейнер способностью изменять высоту/ширину (и порядок ) его элементов для оптимального заполнения доступного пространства (в основном для поддержки всех видов и размеров экранов ).
Flex -контейнер растягивает элементы, чтобы заполнить свободное пространство или сжимает их, чтобы предотвратить выход за границы.
Что наиболее важно, разметка Flexbox не зависит от направления, в противоположность обычным разметкам (блокам, которые ориентированы вертикально и строчным элементам, располагающимся горизонтально ).
И хотя элементы обычной разметки хорошо работают для страниц, им не хватает гибкости (и это не игра слов ) для поддержки больших и сложных приложений (особенно если речь заходит об изменении ориентации, размеров, растяжении, сжатии и так далее ).
Примечание : разметка Flexbox лучше всего подходит для компонентов приложения и небольших макетов, в то время как разметка с помощью grid предназначена для верстки более масштабных макетов.
Основные понятия и термины
Так как Flexbox это целый модуль, а не отдельное свойство, он включает в себя много элементов, в том числе и целый набор свойств. Некоторые из них предназначены для применения к контейнеру (родительскому элементу, известному как flex-контейнер ), в то время как другие должны быть применены к дочерним элементам (назовем их flex-элементы ).
Если обычная разметка основывается на направлениях блоков и строчных элементов, то flex -разметка базируется на направлениях flex -потока. Пожалуйста, обратите внимание на приведенную ниже схему из спецификации, объясняющую основную идею, стоящую за flex -разметкой:
В основном, элементы будут размещены либо вдоль главной оси (от точки main-start до main-end ), либо вдоль поперечной оси (от точки cross-start до cross-end ):
- main axis – это главная ось flex -контейнера, вдоль которой размещаются flex -элементы. Будьте осторожны, она не обязательно располагается горизонтально, ее положение зависит от свойства flex-direction (смотрите ниже );
- main-start | main-end — flex -элементы располагаются внутри контейнера, начиная от точки main-start , и доходят до точки main-end ;
- main size – это ширина или высота flex -элемента, в зависимости от основной величины. В качестве значения свойства main size может быть установлено значение ширины или высоты;
- cross axis – поперечная ось, перпендикулярная главной оси. Ее направление зависит от направления главной оси.
- cross-start | cross-end – flex -строки заполняются элементами и размещаются в контейнере, начиная со стороны cross-start по направлению к стороне cross-end ;
- cross size – ширина или высота flex -элемента, в зависимости от выбранной размерности. Свойство может иметь значение либо ширины, либо высоты поперечной размерности.
Свойства родительского класса (flex-контейнера)
display
Это свойство определяет flex -контейнер: строчной или блоковый, в зависимости от установленного значения. Также оно разрешает flex -контекст для всех его прямых потомков:
Container { display: flex; /* или inline-flex */ }
Отметим, что CSS -столбцы (columns ) не имеют эффекта во flex -контейнере.
flex-direction
Это свойство задает главную ось, определяющую направление, в котором размещаются flex -элементы во flex -контейнере. Flexbox (за исключением опционального обертывания ) является концептом однонаправленной разметки.Представьте, что flex -элементы в первую очередь располагаются либо в горизонтальных, либо вертикальных колонках:
Container { flex-direction: row | row-reverse | column | column-reverse; }
- row (по умолчанию ): слева направо для ltr; справа налево для rtl;
- row-reverse : справа налево для in ltr; слева направо для rtl;
- column : так же как row , но сверху вниз;
- column-reverse : так же как row-reverse , но снизу вверх.
flex-wrap
По умолчанию flex -элементы попытаются втиснуться в одну линию. Вы можете изменить это, и обернуть элементы как нужно с помощью этого свойства. Здесь играет роль и направление, в котором располагаются новые линии:Container{ flex-wrap: nowrap | wrap | wrap-reverse; }
- nowrap (по умолчанию ): однострочный / слева направо для ltr; справа налево для rtl ;
- wrap : многострочный / слева направо для ltr ; справа налево для rtl ;
- wrap-reverse : многострочный / справа налево для ltr ; слева направо для rtl .
flex-flow (применяется к родительскому элементу flex-контейнера)
Это сокращенная форма свойств flex-direction и flex-wrap , которые вместе определяют главную и поперечную оси flex -контейнера. По умолчанию задается значение row nowrap :
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
justify-content
Данное свойство задает выравнивание вдоль главной оси. Это помогает распределить лишнее свободное пространство, в том случае, если все flex -элементы в строке негибкие, либо гибкие, но достигли своего максимального размера. Также данное свойство позволяет получить контроль над выравниваем элементов, когда они выходят за границы строки:Container { justify-content: flex-start | flex-end | center | space-between | space-around; }
- flex-start (по умолчанию): элементы выравниваются к началу строки;
- flex-end : элементы выравниваются к концу строки;
- center : элементы выравниваются по центру строки;
- space-between : элементы распределяются в строке равномерно: первый элемент располагается в начале строки, последний – в конце;
- space-around : элементы распределяются в строке равномерно с одинаковым расстоянием между собой.
align-items
Это свойство определяет то, как по умолчанию располагаются flex -элементы относительно поперечной оси на текущей строке. Его можно считать версией justify-content для поперечной оси (перпендикулярной главной ):Container { align-items: flex-start | flex-end | center | baseline | stretch; }
- flex-start : граница элементов cross-start располагается на линии cross-start ;
- flex-end : граница элементов cross-start располагается на линии cross-end ;
- center : элементы располагаются по центру поперечной оси;
- baseline : выравнивание элементов происходит согласно базовой линии;
- stretch (по умолчанию ): элементы растягиваются для того, чтобы заполнить контейнер (с учетом значений min-width/max-width ).
align-content
Это свойство позволяет выравнивать строки внутри flex -контейнера, когда есть свободное место на поперечной оси, что схоже с тем, как свойство justify-content выравнивает отдельные элементы относительно главной оси.Примечание : это свойство не будет работать, если есть только одна строка flex -элементов:
Container { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }
- flex-start : строки располагаются в начале контейнера;
- flex-end : строки располагаются в конце контейнера;
- center : строки располагаются посередине контейнера;
- space-between : строки распределяются равномерно; первая строка – в начале контейнера, а последняя – в конце;
- space-around : строки размещены равномерно на одинаковом расстоянии друг от друга;
- stretch (по умолчанию ): строки растягиваются, чтобы заполнить оставшееся пространство.
Свойства дочерних элементов
(flex-элементы)
Order
По умолчанию, flex -элементы располагаются в порядке, заданном источником. Однако свойство order контролирует порядок, в котором элементы появляются во flex -контейнере:Item {
order:
flex-grow
Это свойство позволяет flex -элементу «разрастаться » в случае необходимости. Оно принимает безразмерное значение, служащее в качестве пропорции. Это значение определяет, какой объем доступного пространства внутри flex -контейнера может занять элемент.Если для всех элементов свойство flex-grow установлено в 1, то для каждого дочернего элемента будет задан одинаковый размер внутри контейнера. Если вы установите для одного из дочерних элементов значение 2, то он займет в два раза больше места, чем другие:
Item {
flex-grow:
flex-shrink
Это свойство определяет для flex -элементов возможность сжиматься в случае необходимости:
Item {
flex-shrink:
Отрицательные числа недопустимы.
flex-basis
Это свойство определяет размер элементов по умолчанию перед распределением оставшегося пространства:
Item {
flex-basis:
flex
Это свойство является сокращенной формой для комбинации свойств flex-grow, flex-shrink и flex-basis . Второй и третий параметры (flex-shrink и flex-basis ) задаются опционально. Значения по умолчанию: 0 1 auto :
Item { flex: none | [ <"flex-grow"> <"flex-shrink">? || <"flex-basis"> ] }
align-self
Это свойство позволяет переопределить выравнивание, заданное по умолчанию (или определенное свойством align-items ) для отдельных flex -элементов.Доступные значения вы можете найти в описании свойства align-items :
Item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }
Обратите внимание, что float , clear и vertical-align не работают с flex -элементами.
Примеры
Давайте начнем с очень простого примера, решив практически ежедневную проблему: идеальное выравнивание по центру. Нет ничего проще, если использовать flexbox:
Parent { display: flex; height: 300px; /* Или что угодно */ } .child { width: 100px; /* Или что угодно */ height: 100px; /* Или что угодно */ margin: auto; /* Магия! */ }
Этот пример основывается на том факте, что свойство margin , установленное в значение auto , поглощает лишнее пространство. Поэтому такое задание отступа выравнивает элемент ровно по центру от обеих осей.
Теперь давайте воспользуемся еще несколькими свойствами. Предположим, что у нас есть список из 6 элементов, все они фиксированного размера (для эстетичности ), но с возможностью автоматического заполнения.
Мы хотим, чтобы они были красиво, равномерно распределены по горизонтальной оси таким образом, чтобы при изменении размера окна браузера, все смотрелось хорошо (без использования медиа запросов ):
Flex-container { /* Сначала создаем контекст flex-разметки */ display: flex; /* Затем определяем направление потока и хотим ли мы, чтобы элементы были обернуты. * Помните, что это то же самое, что и: * flex-direction: row; * flex-wrap: wrap; */ flex-flow: row wrap; /* Теперь мы определяем, как распределять оставшееся пространство */ justify-content: space-around; }
Готово! Все остальное — уже вопросы оформления. Здесь располагается демонстрация этого примера. Перейдите по ссылке и попробуйте изменить размер окна, чтобы посмотреть, что произойдет:
HTML:
CSS:
Flex-container { padding: 0; margin: 0; list-style: none; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; justify-content: space-around; } .flex-item { background: tomato; padding: 5px; width: 200px; height: 150px; margin-top: 10px; line-height: 150px; color: white; font-weight: bold; font-size: 3em; text-align: center; }
Давайте попробуем еще кое-что. Допустим, у нас на самом верху веб-сайта находится меню навигации, выровненное вправо, но мы хотим, чтобы на экранах среднего размера оно располагалось по центру, а для устройств с маленьким экраном – располагалось в один столбец. Все достаточно просто:
CSS:
/* Большие экраны*/ .navigation { display: flex; flex-flow: row wrap; /* Выравнивание элементов к концу строки по главной оси*/ justify-content: flex-end; } /* Средние экраны */ @media all and (max-width: 800px) { .navigation { /* Для экранов среднего размера, мы центрируем элементы, равномерно распределяя свободное пространство между ними */ justify-content: space-around; } } /* Небольшие экраны */ @media all and (max-width: 500px) { .navigation { /* Для небольших экранах мы используем направление не по строкам, а по столбцам */ flex-direction: column; } }
HTML:
CSS:
Navigation { list-style: none; margin: 0; background: deepskyblue; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; justify-content: flex-end; } .navigation a { text-decoration: none; display: block; padding: 1em; color: white; } .navigation a:hover { background: darken(deepskyblue, 2%); } @media all and (max-width: 800px) { .navigation { justify-content: space-around; } } @media all and (max-width: 600px) { .navigation { -webkit-flex-flow: column wrap; flex-flow: column wrap; padding: 0; } .navigation a { text-align: center; padding: 10px; border-top: 1px solid rgba(255,255,255,0.3); border-bottom: 1px solid rgba(0,0,0,0.1); } .navigation li:last-of-type a { border-bottom: none; } }
Давайте попробуем сделать еще лучше, поиграв с «гибкостью » flex -элементов. Как насчет мобильной разметки в три столбца с заголовком и подвалом во всю ширину? И с выводом элементов, независимым от порядка, заданного исходным кодом:
CSS:
Wrapper { display: flex; flex-flow: row wrap; } /* Задаем для всех элементов ширину в 100% */ .header, .main, .nav, .aside, .footer { flex: 1 100%; } /* В этом случае для ориентации на мобильные устройства мы полагаемся на исходный порядок: * 1. заголовок * 2. навигация * 3. основная часть * 4. боковая панель * 5. подвал */ /* Средние экраны*/ @media all and (min-width: 600px) { /* Обе боковые панели располагаются в одной строке */ .aside { flex: 1 auto; } } /* Большие экраны */ @media all and (min-width: 800px) { /* Инвертируем порядок вывода первой боковой панели и основной части, и указываем основному элементу необходимость занимать максимум в два раза больше места, чем две боковые панели */ .main { flex: 2 0px; } .aside-1 { order: 1; } .main { order: 2; } .aside-2 { order: 3; } .footer { order: 4; } }
Свойство order управляет порядком, в котором дочерние элементы появляются внутри flex-контейнера. По умолчанию они располагаются в том порядке, как добавлены исходно во flex-контейнер.
Значения
.flex-item { order: <целое число>; }flex-элементы могут быть переупорядочены с помощью этого простого свойства без изменения кода HTML.
Значение по умолчанию : 0.
flex-grow
Это свойство задаёт коэффициент роста, который определяет, насколько flex-элемент будет увеличиваться относительно остальных flex-элементов во flex-контейнере, при распределении положительного свободного пространства.
Значения
.flex-item { flex-grow: <число>; }Если все flex-элементы имеют одинаковое значение flex-grow , то все элементы будут иметь и одинаковый размер в контейнере.
Второй flex-элемент занимает больше места относительно размера других flex-элементов.
Значение по умолчанию : 0.
flex-shrink
flex-shrink задаёт коэффициент сжатия, который определяет, насколько flex-элемент будет сжиматься относительно остальных flex-элементов во flex-контейнере, при распределении отрицательного свободного пространства.
Значения
.flex-item { flex-shrink: <число>; }По умолчанию все flex-элементы могут быть сжаты, но если мы установим значение flex-shrink нулевым (без сжатия), то элементы сохраняют исходный размер.
Значение по умолчанию : 1.
Отрицательные числа недопустимы.
flex-basis
Это свойство принимает те же значения, что и свойства width и height , и определяет начальный основной размер flex-элемента, до того, как свободное пространство распределяется в соответствии с коэффициентами.
Значения
.flex-item { flex-basis: auto | <ширина>; }flex-basis указан для четвёртого flex-элемента и диктует его начальный размер.
Значение по умолчанию : auto.
flex
Это свойство является сокращением для свойств flex-grow , flex-shrink и flex-basis . Крое других значений также можно установить auto (1 1 auto ) и none (0 0 auto ).
Значения
.flex-item { flex: none | auto | [Значение по умолчанию : 0 1 auto .
W3C рекомендует использовать сокращённое свойство flex , вместо отдельных свойств, поскольку flex правильно сбрасывает любые неуказанные компоненты для типового использования .
align-self
Свойство align-self позволяет переопределить выравнивание по умолчанию (или значение, указанное через align-items ) для отдельных flex-элементов. Для понимания доступных значений обратитесь к описанию align-items для flex-контейнера.
Значения
.flex-item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }Для третьего и четвёртого flex-элементов переопределено выравнивание через свойство align-self .
С развитием Интернет технологий, в том числе и HTML и CSS, для разработчиков постоянно открываются новые возможности по созданию сайтов. Одной из проблем остается наличие устаревших версий браузеров. В основном это касается Internet Explorer, особенно у тех, кто использует windows xp.
Перед верстальщиком Интернет страниц часто возникает задача выравнивания блоков css на странице. Например, можно расположить все блоки один за другим, горизонтально, расположить их по центру или снизу контейнера и т.д. С появлением параметра свойства display - flex эта задача значительно упрощается. Эта технология разработана таким образом, чтобы компоновать дочерние элементы, то есть элементы внутри блока или контейнера. Параметров этой компоновки более чем достаточно.
Итак, прежде всего нужно создать родительский контейнер. Создадим его так, чтобы вокруг него появилась рамка для наглядности. CSS код для контейнера будет следующим:
Container {
width:450px;
height:250px;
border: 1px solid #000000;
display: flex;
flex-wrap: wrap;
align-content:stretch;
}
Основное свойство - display: flex . Для того, чтобы дочерние элементы размещались в несколько строк добавляем свойство - flex-wrap: wrap.
А как раз свойство align-content указывает на то, как должны располагаться и выравниваться блоки css. Параметр stretch позволяет блокам равномерно расположиться в контейнере. При этом их высота может подбираться автоматически. Как это выглядит. Добавим css для внутренних блоков.
Container div {
width: 50px;
background: green;
margin:5px;
}
Высоту мы не задаем специально. Html код выглядит следующим образом:
Результат работы кода на рисунке.
Что же получиться, если указать еще высоту блоков:
Container div {
width: 50px;
height: 50px;
background: green;
margin:5px;
}
Теперь уберем высоту и сделаем ширину блоков равной 100%
Container div {
width: 100%;
background: green;
margin:5px;
}
Получаем.
Еще одним параметром align-content является center и повзволяет выровнять все блоки по центру.
Container {
width:450px;
height:250px;
border: 1px solid #000000;
display: flex;
flex-wrap: wrap;
align-content:center;
}
.container div {
width: 50px;
height:50px;
background: green;
margin:5px;
}
Результат:
Другой параметр flex-end свойства align-content позволит расположить блоки снизу контейнера.
Container {
width:450px;
height:250px;
border: 1px solid #000000;
display: flex;
flex-wrap: wrap;
align-content:flex-end;
}
Параметр flex-start сделает все с точностью до наоборот.
Container {
width:450px;
height:250px;
border: 1px solid #000000;
display: flex;
flex-wrap: wrap;
align-content:flex-start;
}
Еще один параметр свойства align-content , создать результаты которого без использования контейнера flex будет нелегко - это space-between . Свойство располагает первую линию вверху, а вторую снизу, создавая между ними пустое пространство (space).
Часть CSS кода:
Container {
width:450px;
height:250px;
border: 1px solid #000000;
display: flex;
flex-wrap: wrap;
align-content:space-between;
}
Результат:
Свойство space-around добавляет пустое пространство сверху и снизу. Причем каждое из них равно половине пустого пространтсва по центру.
Container {
width:450px;
height:250px;
border: 1px solid #000000;
display: flex;
flex-wrap: wrap;
align-content:space-around;
}
Итак свойство css align-content имеет множество параметров: stretch, flex-start, flex-end, center, space-between, space-around.
Как видно из примеров выше, изменяя один параметр свойства css align-content мы совершенно по разному используем выравнивание блоков css при помощи технологии flex. Данный код не работает в Internet Explorer до 10 версии включительно.
CSS3-flexbox — это специальная технология, которая была введена в последней версии каскадных стилей, позволяющая задавать гибкую сетку расположения блоков внутри некоторого контейнера-родителя.
Какие возможности дает данная сетка:
- возможность управлять колончатой структурой основного каркаса html-вёрстки;
- управлять ориентацией расположения html-тэгов подобно табличной верстке;
- управлять порядком расположения;
- и многие другие.
Сама технология css-flexbox стоит на базировании блоков в относительной гоизонталдьной и вертикальной осей согласно следующей схемы:
Навигация
Приведем список веб-обозревателей, которые поддерживают рассматриваемое свойство блоков как стандартно, так и с применением спецпрефиксов:
ИЕ:
11.0, 10.0 -ms-
Firefox:
28.0, 18.0 -moz-
Хром:
29.0, 21.0 -webkit-
Сафари:
6.1 -webkit-
Опера:
12.1 -webkit-
Сафари (под Мак):
7.0 -webkit-
Опера-Мини:
8
Анройд-Браузер:
4.4, 4.1 -webkit-
Хром (под Андройд):
44
1.1. Свойство display: flex
CSS-правило предназначено для выстраивания flexbox-сетки, которая строится из дочерних html-тэгов, расположенных внутри некоторого родительского контейнера. Для задания данной сетки необходимо установить правило display в значение:
- display: flex; — для блокового отображения;
- display: inline-flex; — для инлайнового отображения.
Следует отметить, что для некоторых версий браузеров необходимо прописывать это правило с помощью спецпрефиксов (см. пункт выше), а также то, что html-теги лежащие в родителе без обёртки считаются анонимными:
1.2. Выравниваем горизонтально justify-content
Правило используется для того, чтобы выровнять горизонтально дочерние объекты внутри родительского flexbox-контейнера. Данное правило не наследуется.
| justify-content | |
|---|---|
| Значения: | |
| flex-start | Выравнивает по левой кромке. Дефолтное значение |
| flex-end | Выравнивает по правой кромке. |
| center | Выравнивает по середине. |
| space-between | По всей ширине родителя на равновеличинные отрезки. Стоит отметить, что первый элемент приживается к левому краю без пустот, но с учетом паддингов, а последний также, но к правому краю. Все остальные блочные элементы размещаются между первым и последним через одинаковые отрезки пустоты. |
| space-around | По всей ширине так, что между каждыми двумя блоками будет одинаковый отступ, а по края его половина. |
| initial | Задание дефолтного значения. |
| inherit | |
Формат записи
B-podlogka { height: 120px; background-color: #ddd; margin: 0px; padding: 10px; display: flex; display: -webkit-flex; justify-content: flex-start; -webkit-justify-content: flex-start; }
B-podlogka { justify-content: flex-end; }
B-podlogka { justify-content: center; }
B-podlogka { justify-content: space-between; }
B-podlogka { justify-content: space-around; }
1.3. Вертикальное выравнивание align-items
Свойство используется для того, чтобы выровнять вертикально дочерние объекты внутри родительского flexbox-контейнера. Следует отметить, что под это выравнивание также подпадают и анонимные флекс-итемы. Данное правило не наследуется. Выравниваются только блоки первой строки.
| align-items | |
|---|---|
| Значения: | |
| stretch | Флексбокс-блоки, если не зафиксирована высота, вытягиваются на всю высоту родительского контейнера. Является первоначальным (базовым) параметром. |
| flex-start | Предназначено для выравнивания флексбокс-итемов по верхней кромке контейнера-родителя с учетом внутренних отступов (padding). |
| flex-end | Предназначено для выравнивания флексбокс-итемов по нижней кромке контейнера-родителя с учетом внутренних отступов (padding). |
| center | Выравнивает дочерние флекс-блоки внутри флекс-контейнера по средней линии самого высокого блока. |
| baseline | Выравнивает дочерние флекс-блоки внутри родительского относительно средней линии текста в этих блоках. |
| initial | |
| inherit | Предназначено для сообщения css-интерпретатору, что значение нужно брать у родительского тэга. |
Формат записи
B-podlogka { align-items: stretch; -webkit-align-items: stretch; }
Следует отметить, для того, чтобы дочерние флекс-блоки растянулись на всю высоту контейнера, необходимо чтобы у них не было устанолвено фиксированной высоты: height: auto; .
B-podlogka { align-items: flex-start; }
B-podlogka { align-items: flex-end; }
B-podlogka { align-items: center; }
B-podlogka { align-items: baseline; }
1.4. Ориентация основной оси flex-direction
Применяется для задания ориентации (направленности) следования flex-блоков друг за другом. В соответствии с установленными стандартами ориентация может быть двух видов: по вертикали (в колонку, по дефолту?) и по горизонтали (в строку, по дефолту?).
Формат записи
B-podlogka { flex-direction: row; -webkit-flex-direction: row; }
B-podlogka { flex-direction: row-reverse; }
B-podlogka { flex-direction: column; }
B-podlogka { flex-direction: column-reverse; }
1.5. Размещение в несколько строк flex-wrap
Отвечает за размещение дочерних flex-блоков в одну или несколько строк.
| flex-wrap | |
|---|---|
| Значения: | |
| nowrap | В исходном состоянии все дочерние итемы располагаются в одну строчку (? или? в зависимости от выбранной ориентации текста). |
| wrap | При задании такого параметра дочерние итемы будут занимать несколько строк в зависимости от ширины родителя (? или? в зависимости от выбранной ориентации текста). |
| wrap-reverse | При задании такого параметра дочерние итемы будут занимать несколько строк в зависимости от ширины родителя, имея при этом реверсивный порядок чередования. |
| initial | Будет установлено в первоначальное значение. |
| inherit | Предназначено для сообщения css-интерпретатору, что значение нужно брать у родительского тэга. |
Формат записи
B-podlogka { flex-wrap: wrap; -webkit-flex-wrap: wrap; }
B-podlogka { flex-wrap: wrap-reverse; }
1.6. Направленность и многострочность одним правилом flex-flow
Данное правило используется, как более компактная запись двух предыдущих правил с целью оптимизации кода.
Формат записи
B-podlogka { flex-flow: row wrap; -webkit-flex-flow: row wrap; }
1.7. Выравниваем вертикально во всех строках align-content
Это цсс-правило используется для того, чтобы выровнять вертикально внутриконтейнейрные дочерние флекс-блоки. Для срабатывания этого правила необходимо, чтобы были у родительского контейнера заданы: height и flex-flow. Является не наследуемым.
| align-content | |
|---|---|
| Значения: | |
| stretch | Растягивание элементов на всю высоту родительского контейнера (у флекс-блоков не должна быть зафиксирована высота). |
| flex-start | Выравнивает поверху. |
| flex-end | Выравнивает понизу. |
| center | Выравнивает вертикально по центру. |
| space-between | Вертикально выравнивает внутриконтейнерные элементы таким образом, что первая линия блоков прижимается кверху, последняя — книзу, а пространство между остальными распределяется равномерно. |
| space-around | Вертикально выравнивает внутриконтейнерные элементы таким образом, что расстояние в начале, в конце и между ними равны между собой. |
| initial | Будет установлено в первоначальное значение. |
| inherit | Опция для сообщения css-интерпретатору, что значение нужно брать у родительского тэга. |
Пример кода
B-podlogka { height: 120px; flex-flow: row wrap; align-content: stretch; }
B-podlogka { align-content: flex-start; }
B-podlogka { align-content: flex-end; }
B-podlogka { align-content: center; }
B-podlogka { align-content: space-between; }
B-podlogka { align-content: space-around; }
Кроме правил, используемых в отношении родителя-контейнера, во флексбокс-сетке существует несколько правил, применяемых к дочерним элементам. Рассмотрим их подробнее.
2.1. Упорядочивание блоков order
ЦСС-правило применяется для упорядочивания некоторого дочернего флекс-элемента внутри флекс-родителя. Для постановки блока в качестве первого ему необходимо указать 1, а для перемещения его в самый конец -1. Является не наследуемым.
Формат записи
B-div1 { -webkit-order: 1; order: 1; }
B-div5 { -webkit-order: -1; order: -1; }
2.2. Базис флекс-блока flex-basis
CSS-правило, предназначенное для фиксации ширины дочернего флекс-блока внутри родительского контейнера. Задается для срабатывания двух ниже лежащих параметров. Является не наследуемым правилом.
Пример кода
B-div3 { flex-basis: 70px; -webkit-flex-basis: 70px; }
Всем блокам задан базис в размере пятидесяти пикселей, а третьему — девяносто пикселей.