Flex таблицы как делать
Доброй ночи. Недавно начал изучать html и столкнулся с такой проблемой. Не могу понять как тут сделать.Пробовал таблицу
Но получается что то не то . Со всеми остальными заданиями вопросов меньше.Может кто то помочь составить код для дальнейшего анализа ? или очень подробно разжевать?
Отслеживать
2,668 3 3 золотых знака 15 15 серебряных знаков 38 38 бронзовых знаков
задан 17 мая 2020 в 19:05
user389240 user389240
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
А зачем тут таблица? Обычными блоками можно сделать:
.container < width: 1100px; display: flex; flex-direction: column; align-items: center; >.blocks < display: flex; flex-wrap: wrap; justify-content: space-between; >.block
Цифры и факты
86 миллиардов Число нейронов в мозге человека 86 миллиардов Число нейронов в мозге человека 86 миллиардов Число нейронов в мозге человека 86 миллиардов Число нейронов в мозге человека 86 миллиардов Число нейронов в мозге человека 86 миллиардов Число нейронов в мозге человека 86 миллиардов Число нейронов в мозге человека 86 миллиардов Число нейронов в мозге человека Гайд по flexbox
Всё, что нужно знать про флексбоксы: основные термины, свойства флекс-контейнера и флекс-элементов, полезные ссылки по теме.
Время чтения: 12 мин
Открыть/закрыть навигацию по статье
- Что это?
- Основные термины
- Свойства флекс-контейнера
- display
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
- gap
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
- Ссылки
- Андрей Захаров советует
- Егор Левченко советует
- Алёна Батицкая советует
- Когда нужно использовать flexbox, а когда grid? Бывают ли исключения?
Контрибьюторы:
- Егор Левченко ,
- Светлана Коробцева ,
- Дмитрий Приходько ,
- Дима Шелков
Обновлено 12 апреля 2024
Что это?
Скопировать ссылку «Что это?» Скопировано
Долгое время веб-интерфейсы были статичными — сайты разрабатывались и просматривались только на экранах мониторов стационарных компьютеров. Однако с десяток лет назад, совсем недавно по историческим меркам, у нас появилось огромное разнообразие экранов — от мобильных телефонов до телевизоров, — на которых мы можем взаимодействовать с сайтами. Так родилась необходимость в гибких системах раскладки.
Идея флексбоксов появилась ещё в 2009 году, и этот стандарт до сих пор развивается и прорабатывается. Основная идея флексов — гибкое распределение места между элементами, гибкая расстановка, выравнивание, гибкое управление. Ключевое слово — гибкое, что и отражено в названии (flex — англ. гибко).
Основные термины
Скопировать ссылку «Основные термины» Скопировано
- Флекс-контейнер: элемент, к которому применяется свойство display : flex . Вложенные в него элементы подчиняются правилам раскладки флексов.
- Флекс-элемент: элемент, вложенный во флекс-контейнер.
- Основная ось: основная направляющая флекс-контейнера, вдоль которой располагаются флекс-элементы.
- Поперечная (побочная, перпендикулярная) ось: ось, идущая перпендикулярно основной. Позже вы поймёте, для чего она нужна.
- Начало / конец основной оси: точки в начале и в конце основной оси соответственно. Это пригодится нам для выравнивания флекс-элементов.
- Начало / конец поперечной оси: точки в начале и в конце поперечной оси соответственно.
- Размер по основной оси (основной размер): размер флекс-элемента вдоль основной оси. Это может быть ширина или высота в зависимости от направления основной оси.
- Размер по поперечной оси (поперечный размер): размер флекс-элемента вдоль поперечной оси. Это может быть ширина или высота в зависимости от направления поперечной оси. Этот размер всегда перпендикулярен основному размеру. Если основной размер — это ширина, то поперечный размер — это высота, и наоборот.
Свойства флекс-контейнера
Скопировать ссылку «Свойства флекс-контейнера» Скопировано
display
Скопировать ссылку «display» Скопировано
.container display: flex;>.container display: flex; >Когда мы задаём какому-то элементу значение flex для свойства display , мы превращаем этот элемент в флекс-контейнер. Внутри него начинает действовать флекс-контекст, его дочерние элементы начинают подчиняться свойствам флексбокса.
Снаружи флекс-контейнер выглядит как блочный элемент — занимает всю ширину родителя, следующие за ним элементы в разметке переносятся на новую строку.
.container display: inline-flex;>.container display: inline-flex; >Если контейнеру задано значение inline — flex , то снаружи он начинает вести себя как строчный (инлайн) элемент — размеры зависят только от внутреннего контента, встаёт в строку с другими элементами. Внутри это ровно такой же флекс-контейнер, как и при предыдущем значении.
flex — direction
Скопировать ссылку «flex-direction» Скопировано
Свойство управления направлением основной и поперечной осей.
.container display: flex; flex-direction: row;>.container display: flex; flex-direction: row; >- row (значение по умолчанию) — основная ось идёт горизонтально слева направо, поперечная ось идёт вертикально сверху вниз.
- row — reverse — основная ось идёт горизонтально справа налево, поперечная ось идёт вертикально сверху вниз.
- column — основная ось идёт вертикально сверху вниз, поперечная ось идёт горизонтально слева направо.
- column — reverse — основная ось идёт вертикально снизу вверх, поперечная ось идёт горизонтально слева направо.
flex — flow
Скопировать ссылку «flex-flow» Скопировано
Это свойство-шорткат для одновременного определения значений свойств flex — direction и flex — wrap .
.container display: flex; flex-flow: column wrap;>.container display: flex; flex-flow: column wrap; >.container display: flex; flex-flow: row nowrap;>.container display: flex; flex-flow: row nowrap; >
flex — grow
Скопировать ссылку «flex-grow» Скопировано
.container display: flex;> .item flex-grow: 1;>.container display: flex; > .item flex-grow: 1; >Это свойство указывает, может ли вырастать флекс-элемент при наличии свободного места, и насколько. По умолчанию значение равно 0. Значением может быть любое положительное целое число (включая 0).
Если у всех флекс-элементов будет прописано flex — grow : 1 , то свободное пространство в контейнере будет равномерно распределено между всеми.
Если при этом одному из элементов мы зададим flex — grow : 2 , то он постарается занять в два раза больше свободного места, чем его соседи.
flex — shrink
Скопировать ссылку «flex-shrink» Скопировано
.container display: flex;> .item flex-shrink: 3;>.container display: flex; > .item flex-shrink: 3; >Свойство flex — shrink полностью противоположно свойству flex — grow . Если в контейнере не хватает места для расположения всех элементов без изменения размеров, то свойство flex — shrink указывает, в каких пропорциях элемент будет уменьшаться.
Чем больше значение у этого свойства, тем быстрее элемент будет сжиматься по сравнению с соседями, имеющими меньшее значение.
Значение по умолчанию — 1. Значением может быть любое целое положительное число (включая 0).
Два предыдущих свойства работают с пропорциональным разделением пространства, не с конкретными размерами. Они довольно непростые, даже опытный разработчик не всегда знает, как они в точности работают. Загляните в конец статьи, если хотите подробнее почитать о каждом из них.
flex — basis
Скопировать ссылку «flex-basis» Скопировано
.container display: flex;> .item flex-basis: 250px;>.container display: flex; > .item flex-basis: 250px; >Свойство flex — basis указывает на размер элемента до того, как свободное место будет распределено (см. flex-grow).
Значением может быть размер в любых относительных или абсолютных единицах: 20rem , 5vw , 250px . А также можно использовать ключевое слово auto (значение по умолчанию). В этом случае при расчёте размера элемента будут приниматься во внимание значения свойств width , max — width , min — width или аналогичные свойства высоты, в зависимости от того, в каком направлении идёт основная ось.
Если никакие размеры не заданы, а свойству flex — basis установлено значение auto , то элемент занимает столько пространства, сколько нужно для отображения контента.
flex
Скопировать ссылку «flex» Скопировано
.container display: flex;> .item flex: 1 1 auto;>.container display: flex; > .item flex: 1 1 auto; >Свойство-шорткат, с помощью которого можно указать значение трёх свойств одновременно: flex — grow , flex — shrink и flex — basis . Первое значение является обязательным, остальные опциональны.
Значение по умолчанию: 0 1 auto , что расшифровывается как flex — grow : 0 , flex — shrink : 1 , flex — basis : auto .
/* 0 0 auto */flex: none; /* Одно значение, число без единиц: flex-grow */flex: 2; /* Одно значение, ширина/высота: flex-basis */flex: 10em;flex: 30px;flex: auto;flex: content; /* Два значения: flex-grow | flex-basis */flex: 1 30px; /* Два значения: flex-grow | flex-shrink */flex: 2 2; /* Три значения: flex-grow | flex-shrink | flex-basis */flex: 2 2 10%; /* Глобальные значения */flex: inherit;flex: initial;flex: unset;/* 0 0 auto */ flex: none; /* Одно значение, число без единиц: flex-grow */ flex: 2; /* Одно значение, ширина/высота: flex-basis */ flex: 10em; flex: 30px; flex: auto; flex: content; /* Два значения: flex-grow | flex-basis */ flex: 1 30px; /* Два значения: flex-grow | flex-shrink */ flex: 2 2; /* Три значения: flex-grow | flex-shrink | flex-basis */ flex: 2 2 10%; /* Глобальные значения */ flex: inherit; flex: initial; flex: unset;align — self
Скопировать ссылку «align-self» Скопировано
.container display: flex; align-items: flex-start;> .item align-self: flex-end;>.container display: flex; align-items: flex-start; > .item align-self: flex-end; >При помощи этого свойства можно выровнять один или несколько элементов иначе, чем задано у родительского элемента. Например, в коде выше у родителя задано выравнивание вложенных элементов по верхнему краю родителя. А для элемента с классом .item мы задаём выравнивание по нижнему краю.
Ссылки
Скопировать ссылку «Ссылки» Скопировано
- Как реально работает flex — grow
- Как реально работает flex — shrink
- Песочница Флексбоксов
- Game: Flexbox Froggy
- Game: Flexbox Defense
- Game: Flexbox Ducky
- Курс по Флексбоксам от Wes Bos
2.23. CSS flexbox
CSS flexbox (Flexible Box Layout Module) — модуль макета гибкого контейнера — представляет собой способ компоновки элементов, в основе лежит идея оси.
Flexbox состоит из гибкого контейнера (flex container) и гибких элементов (flex items). Гибкие элементы могут выстраиваться в строку или столбик, а оставшееся свободное пространство распределяется между ними различными способами.
Модуль flexbox позволяет решать следующие задачи:
- Располагать элементы в одном из четырех направлений: слева направо, справа налево, сверху вниз или снизу вверх.
- Переопределять порядок отображения элементов.
- Автоматически определять размеры элементов таким образом, чтобы они вписывались в доступное пространство.
- Решать проблему с горизонтальным и вертикальным центрированием.
- Переносить элементы внутри контейнера, не допуская его переполнения.
- Создавать колонки одинаковой высоты.
- Создавать прижатый к низу страницы подвал сайта.
Flexbox решает специфические задачи — создание одномерных макетов, например, навигационной панели, так как flex-элементы можно размещать только по одной из осей.
Список текущих проблем модуля и кросс-браузерных решений для них вы можете прочитать в статье Philip Walton Flexbugs.
Что такое flexbox
- Содержание:
- 1. Основные понятия
- 2. Flex-контейнер
- 3. Flex-элементы
- 4. Порядок отображения flex-элементов и ориентация
- 4.1. Направление главной оси: flex-direction
- 4.2. Управление многострочностью flex-контейнера: flex-wrap
- 4.3. Краткая запись направления и многострочности: flex-flow
- 4.4. Порядок отображения flex-элементов: order
- 5. Гибкость flex-элементов
- 5.1. Задание гибких размеров одним свойством: flex
- 5.2. Коэффициент роста: flex-grow
- 5.3. Коэффициент сжатия: flex-shrink
- 5.4. Базовый размер: flex-basis
- 6. Выравнивание
- 6.1. Выравнивание по главной оси: justify-content
- 6.2. Выравнивание по поперечной оси: align-items и align-self
- 6.3. Выравнивание строк flex-контейнера: align-content
Поддержка браузерами
IE: 11.0, 10.0 -ms-
Firefox: 28.0, 18.0 -moz-
Chrome: 29.0, 21.0 -webkit-
Safari: 6.1 -webkit-
Opera: 12.1 -webkit-
iOS Safari: 7.0 -webkit-
Opera Mini: 8
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 441. Основные понятия
Для описания модуля Flexbox используется определенный набор терминов. Значение flex-flow и режим записи определяют соответствие этих терминов физическим направлениям: верх / право / низ / лево, осям: вертикальная / горизонтальная и размерам: ширина / высота.
Главная ось (main axis) — ось, вдоль которой выкладываются flex-элементы. Она простирается в основном измерении.
Main start и main end — линии, которые определяют начальную и конечную стороны flex-контейнера, относительно которых выкладываются flex-элементы (начиная с main start по направлению к main end).
Основной размер (main size) — ширина или высота flex-контейнера или flex-элементов, в зависимости от того, что из них находится в основном измерении, определяют основной размер flex-контейнера или flex-элемента.
Поперечная ось (cross axis) — ось, перпендикулярная главной оси. Она простирается в поперечном измерении.
Cross start и cross end — линии, которые определяют начальную и конечную стороны поперечной оси, относительно которых выкладываются flex-элементы.
Поперечный размер (cross size) — ширина или высота flex-контейнера или flex-элементов, в зависимости от того, что находится в поперечном измерении, являются их поперечным размером.
2. Flex-контейнер
Flex-контейнер устанавливает новый гибкий контекст форматирования для его содержимого. Flex-контейнер не является блочным контейнером, поэтому для дочерних элементов не работают такие CSS-свойства, как float , clear , vertical-align . Также, на flex-контейнер не оказывают влияние свойства column-* , создающие колонки в тексте и псевдоэлементы ::first-line и ::first-letter .
Модель flexbox-разметки связана с определенным значением CSS-свойства display родительского html-элемента, содержащего внутри себя дочерние блоки. Для управления элементами с помощью этой модели нужно установить свойство display следующим образом:
.flex-container < /*генерирует flex-контейнер уровня блока*/ display: -webkit-flex; display: flex; >.flex-container < /*генерирует flex-контейнер уровня строки*/ display: -webkit-inline-flex; display: inline-flex; >После установки данных значений свойства каждый дочерний элемент автоматически становится flex-элементом, выстраиваясь в один ряд (вдоль главной оси). При этом блочные и строчные дочерние элементы ведут себя одинаково, т.е. ширина блоков равна ширине их содержимого с учетом внутренних полей и рамок элемента.
Если родительский блок содержит текст или изображения без оберток, они становятся анонимными flex-элементами. Текст выравнивается по верхнему краю блока-контейнера, а высота изображения становится равной высоте блока, т.е. оно деформируется.
3. Flex-элементы
Flex-элементы — блоки, представляющие содержимое flex-контейнера в потоке. Flex-контейнер устанавливает новый контекст форматирования для своего содержимого, который обуславливает следующие особенности:
- Для flex-элементов блокируется их значение свойства display . Значение display: inline-block; и display: table-cell; вычисляется в display: block; .
- Пустое пространство между элементами исчезает: оно не становится своим собственным flex-элементом, даже если межэлементный текст обернут в анонимный flex-элемент. Для содержимого анонимного flex-элемента невозможно задать собственные стили, но оно будет наследовать их (например, параметры шрифта) от flex-контейнера.
- Абсолютно позиционированный flex-элемент не участвует в компоновке гибкого макета.
- Поля margin соседних flex-элементов не схлопываются.
- Процентные значения margin и padding вычисляются от внутреннего размера содержащего их блока.
- margin: auto; расширяются, поглощая дополнительное пространство в соответствующем измерении. Их можно использовать для выравнивания или раздвигания смежных flex-элементов.
- Автоматический минимальный размер flex-элементов по умолчанию является минимальным размером его содержимого, то есть min-width: auto; . Для контейнеров с прокруткой автоматический минимальный размер обычно равен нулю.
4. Порядок отображения flex-элементов и ориентация
Содержимое flex-контейнера можно разложить в любом направлении и в любом порядке (переупорядочение flex-элементов внутри контейнера влияет только на визуальный рендеринг).
4.1. Направление главной оси: flex-direction
Свойство относится к flex-контейнеру. Управляет направлением главной оси, вдоль которой укладываются flex-элементы, в соответствии с текущим режимом записи.
Свойство не наследуется.
flex-direction row Значение по умолчанию, слева направо (в rtl справа налево). Flex-элементы выкладываются в строку. Начало (main-start) и конец (main-end) направления главной оси соответствуют началу (inline-start) и концу (inline-end) оси строки (inline-axis). row-reverse Направление справа налево (в rtl слева направо). Flex-элементы выкладываются в строку относительно правого края контейнера (в rtl — левого). column Направление сверху вниз. Flex-элементы выкладываются в колонку. column-reverse Колонка с элементами в обратном порядке, снизу вверх. initial Устанавливает значение свойства в значение по умолчанию. inherit Наследует значение свойства от родительского элемента. 
flex-direction: row; flex-direction: row-reverse; flex-direction: column; flex-direction: column-reverse; flex-direction: inherit; flex-direction: initial;4.2. Управление многострочностью flex-контейнера: flex-wrap
Свойство определяет, будет ли flex-контейнер однострочным или многострочным, а также задает направление поперечной оси, определяющее направление укладки новых линий flex-контейнера.
По умолчанию flex-элементы укладываются в одну строку, вдоль главной оси. При переполнении они будут выходить за пределы ограничивающей рамки flex-контейнера.
Свойство не наследуется.
flex-wrap nowrap Значение по умолчанию. Flex-элементы не переносятся, а располагаются в одну линию слева направо (в rtl справа налево). wrap Flex-элементы переносятся, располагаясь в несколько горизонтальных рядов (если не помещаются в один ряд) в направлении слева направо (в rtl справа налево). wrap-reverse Flex-элементы переносятся на новые линии, располагаясь в обратном порядке слева-направо, при этом перенос происходит снизу вверх. initial Устанавливает значение свойства в значение по умолчанию. inherit Наследует значение свойства от родительского элемента. 
flex-wrap: nowrap; flex-wrap: wrap; flex-wrap: wrap-reverse; flex-wrap: inherit; flex-wrap: initial;4.3. Краткая запись направления и многострочности: flex-flow
Свойство позволяет определить направления главной и поперечной осей, а также возможность переноса flex-элементов при необходимости на несколько строк. Представляет собой сокращённую запись свойств flex-direction и flex-wrap . Значение по умолчанию flex-flow: row nowrap; .
Свойство не наследуется.
flex-flow направление Указывает направление главной оси. Значение по умолчанию row . многострочность Задаёт многострочность поперечной оси. Значение по умолчанию nowrap . initial Устанавливает значение свойства в значение по умолчанию. inherit Наследует значение свойства от родительского элемента. flex-flow: row; flex-flow: row-reverse; flex-flow: column; flex-flow: column-reverse; flex-flow: nowrap; flex-flow: wrap; flex-flow: wrap-reverse; flex-flow: row nowrap; flex-flow: column wrap; flex-flow: column-reverse wrap-reverse; flex-flow: inherit; flex-flow: initial;4.4. Порядок отображения flex-элементов: order
Свойство определяет порядок, в котором flex-элементы отображаются и располагаются внутри flex-контейнера. Применяется к flex-элементам.
Свойство не наследуется.
Первоначально все flex-элементы имеют order: 0; . При указании значения от -1 для элемента он перемещается в начало сроки, значение 1 — в конец. Если несколько flex-элементов имеют одинаковое значение order , они будут отображаться в соответствии с исходным порядком.
order число Свойство задается целым числом, отвечающим за порядок отображения flex-элементов. Значение по умолчанию 0 . initial Устанавливает значение свойства в значение по умолчанию. inherit Наследует значение свойства от родительского элемента. order: 2; order: -1; order: inherit; order: initial;
5. Гибкость flex-элементов
Определяющим аспектом гибкого макета является возможность «сгибать» flex-элементы, изменяя их ширину / высоту (в зависимости от того, какой размер находится на главной оси), чтобы заполнить доступное пространство в основном измерении. Это делается с помощью свойства flex . Flex-контейнер распределяет свободное пространство между своими дочерними элементами (пропорционально их коэффициенту flex-grow ) для заполнения контейнера или сжимает их (пропорционально их коэффициенту flex-shrink ), чтобы предотвратить переполнение.
Flex-элемент будет полностью «негибок», если его значения flex-grow и flex-shrink равны нулю, и «гибкий» в противном случае.
5.1. Задание гибких размеров одним свойством: flex
Свойство является сокращённой записью свойств flex-grow , flex-shrink и flex-basis . Значение по умолчанию: flex: 0 1 auto; . Можно указывать как одно, так и все три значения свойств.
Свойство не наследуется.
W3C рекомендует использовать сокращённую запись, так как она правильно сбрасывает любые неуказанные компоненты, чтобы подстроиться под типичное использование.
flex коэффициент растяжения Коэффициент увеличения ширины flex-элемента относительно других flex-элементов. коэффициент сужения Коэффициент уменьшения ширины flex-элемента относительно других flex-элементов. базовая ширина Базовая ширина flex-элемента. auto Эквивалентно flex: 1 1 auto; . none Эквивалентно flex: 0 0 auto; . initial Устанавливает значение свойства в значение по умолчанию. Эквивалентно flex: 0 1 auto; . inherit Наследует значение свойства от родительского элемента. flex: none; /* Одно значение, число без единиц: flex-grow */ flex: 2; /* Одно значение, ширина/высота: flex-basis */ flex: 10em; flex: 30px; flex: auto; flex: content; /* Два значения: flex-grow | flex-basis */ flex: 1 30px; /* Два значения: flex-grow | flex-shrink */ flex: 2 2; /* Три значения: flex-grow | flex-shrink | flex-basis */ flex: 2 2 10%; flex: inherit; flex: initial;5.2. Коэффициент роста: flex-grow
Свойство определяет коэффициент роста одного flex-элемента относительно других flex-элементов в flex-контейнере при распределении положительного свободного пространства. Если сумма значений flex-grow flex-элементов в строке меньше 1, они занимают менее 100% свободного пространства.
Свойство не наследуется.
flex-grow число Положительное целое или дробное число, устанавливающее коэффициент роста flex-элемента. Значение по умолчанию 0 . initial Устанавливает значение свойства в значение по умолчанию. inherit Наследует значение свойства от родительского элемента. 
flex-grow: 3; flex-grow: 0.6; flex-grow: inherit; flex-grow: initial;5.3. Коэффициент сжатия: flex-shrink
Свойство указывает коэффициент сжатия flex-элемента относительно других flex-элементов при распределении отрицательного свободного пространства. Умножается на базовый размер flex-basis . Отрицательное пространство распределяется пропорционально тому, насколько элемент может сжаться, поэтому, например, маленький flex-элемент не уменьшится до нуля, пока не будет заметно уменьшен flex-элемент большего размера.
Свойство не наследуется.
flex-shrink число Положительное целое или дробное число, устанавливающее коэффициент уменьшения flex-элемента. Значение по умолчанию 1 . initial Устанавливает значение свойства в значение по умолчанию. inherit Наследует значение свойства от родительского элемента. 
flex-shrink: 2; flex-shrink: 0.6; flex-shrink: inherit; flex-shrink: initial;5.4. Базовый размер: flex-basis
Свойство устанавливает начальный основной размер flex-элемента до распределения свободного пространства в соответствии с коэффициентами гибкости. Для всех значений, кроме auto и content , базовый гибкий размер определяется так же, как width в горизонтальных режимах записи. Процентные значения определяются относительно размера flex-контейнера, а если размер не задан, используемым значением для flex-basis являются размеры его содержимого.
Свойство не наследуется.
flex-basis auto Значение по умолчанию. Элемент получает базовый размер, соответствующий размеру его содержимого (если он не задан явно). content Определяет базовый размер в зависимости от содержимого flex-элемента. длина Базовый размер определяется так же, как для ширины и высоты. Задается в единицах длины. initial Устанавливает значение свойства в значение по умолчанию. inherit Наследует значение свойства от родительского элемента. flex-basis: 10em; flex-basis: 3px; flex-basis: auto; flex-basis: content; flex-basis: inherit; flex-basis: initial;6. Выравнивание
6.1. Выравнивание по главной оси: justify-content
Свойство выравнивает flex-элементы по главной оси flex-контейнера, распределяя свободное пространство, незанятое flex-элементами. Когда элемент преобразуется в flex-контейнер, flex-элементы по умолчанию сгруппированы вместе (если для них не заданы поля margin ). Промежутки добавляются после расчета значений margin и flex-grow . Если какие-либо элементы имеют ненулевое значение flex-grow или margin: auto; , свойство не будет оказывать влияния.
Свойство не наследуется.
justify-content flex-start Значение по умолчанию. Flex-элементы выкладываются в направлении, идущем от начала flex-контейнера. flex-end Flex-элементы размещаются в конце flex-контейнера. center Flex-элементы выравниваются по центру flex-контейнера. space-between Flex-элементы равномерно распределяются по линии. Первый flex-элемент помещается вровень с краем начальной линии, последний flex-элемент — вровень с краем конечной линии, а остальные flex-элементы на линии распределяются так, чтобы расстояние между любыми двумя соседними элементами было одинаковым. Если оставшееся свободное пространство отрицательно или в строке присутствует только один flex-элемент, это значение идентично параметру flex-start . space-around Flex-элементы на линии распределяются так, чтобы расстояние между любыми двумя смежными flex-элементами было одинаковым, а расстояние между первым / последним flex-элементами и краями flex-контейнера составляло половину от расстояния между flex-элементами. initial Устанавливает значение свойства в значение по умолчанию. inherit Наследует значение свойства от родительского элемента. 
justify-content: center; justify-content: flex-start; justify-content: flex-end; justify-content: space-between; justify-content: space-around; justify-content: stretch; justify-content: inherit; justify-content: initial;6.2. Выравнивание по поперечной оси: align-items и align-self
Flex-элементы можно выравнивать по поперечной оси текущей строки flex-контейнера. align-items устанавливает выравнивание для всех элементов flex-контейнера, включая анонимные flex-элементы. align-self позволяет переопределить это выравнивание для отдельных flex-элементов. Если любое из поперечных margin flex-элемента имеет значение auto , align-self не имеет никакого влияния.
6.2.1. align-items
Свойство выравнивает flex-элементы, в том числе и анонимные flex-элементы по поперечной оси.
Свойство не наследуется.
align-items flex-start Верхний край flex-элемента помещается вплотную с flex-линией (или на расстоянии, с учетом заданных полей margin и рамок border элемента), проходящей через начало поперечной оси. flex-end Нижний край flex-элемента помещается вплотную с flex-линией (или на расстоянии, с учетом заданных полей margin и рамок border элемента), проходящей через конец поперечной оси. center Поля flex-элемента центрируется по поперечной оси в пределах flex-линии. baseline Базовые линии всех flex-элементов, участвующих в выравнивании, совпадают. stretch Если поперечный размер flex-элемента вычисляется как auto и ни одно из поперечных значений margin не равно auto , элемент растягивается. Значение по умолчанию. initial Устанавливает значение свойства в значение по умолчанию. inherit Наследует значение свойства от родительского элемента. 
align-items: stretch; align-items: center; align-items: flex-start; align-items: flex-end; align-items: baseline; align-items: inherit; align-items: initial;6.2.2. align-self
Свойство отвечает за выравнивание отдельно взятого flex-элемента по высоте flex-контейнера. Переопределяет выравнивание, заданное align-items .
Свойство не наследуется.
align-self auto Значение по умолчанию. Flex-элемент использует выравнивание, указанное в свойстве align-items flex-контейнера. flex-start Верхний край flex-элемента помещается вплотную с flex-линией (или на расстоянии, с учетом заданных полей margin и рамок border элемента), проходящей через начало поперечной оси. flex-end Нижний край flex-элемента помещается вплотную с flex-линией (или на расстоянии, с учетом заданных полей margin и рамок border элемента), проходящей через конец поперечной оси. center Поля flex-элемента центрируется по поперечной оси в пределах flex-линии. baseline Flex-элемент выравнивается по базовой линии. stretch Если поперечный размер flex-элемента вычисляется как auto и ни одно из поперечных значений margin не равно auto , элемент растягивается. Значение по умолчанию. initial Устанавливает значение свойства в значение по умолчанию. inherit Наследует значение свойства от родительского элемента. 
align-self: auto; align-self: center; align-self: flex-start; align-self: flex-end; align-self: baseline; align-self: stretch; align-self: inherit; align-self: initial;6.3. Выравнивание строк flex-контейнера: align-content
Свойство выравнивает строки в flex-контейнере при наличии дополнительного пространства на поперечной оси, аналогично выравниванию отдельных элементов на главной оси с помощью свойства justify-content . Свойство не влияет на однострочный flex-контейнер.
Свойство не наследуется.
align-content flex-start Строки укладываются по направлению к началу flex-контейнера. Край первой строки помещается вплотную к краю flex-контейнера, каждая последующая — вплотную к предыдущей строке. flex-end Строки укладываются по направлению к концу flex-контейнера. Край последней строки помещается вплотную к краю flex-контейнера, каждая предыдущая — вплотную к последующей строке. center Строки укладываются по направлению к центру flex-контейнера. Строки расположены вплотную друг к другу и выровнены по центру flex-контейнера с равным расстоянием между начальным краем содержимого flex-контейнера и первой строкой и между конечным краем содержимого flex-контейнера и последней строкой. space-between Строки равномерно распределены в flex-контейнере. Если оставшееся свободное пространство отрицательно или в flex-контейнере имеется только одна flex-линия, это значение идентично flex-start . В противном случае край первой строки помещается вплотную к начальному краю содержимого flex-контейнера, край последней строки — вплотную к конечному краю содержимого flex-контейнера. Остальные строки распределены так, чтобы расстояние между любыми двумя соседними строками было одинаковым. space-around Строки равномерно распределены в flex-контейнере с половинным пробелом на обоих концах. Если оставшееся свободное пространство отрицательно, это значение идентично цент center . В противном случае строки распределяются таким образом, чтобы расстояние между любыми двумя соседними строками было одинаковым, а расстояние между первой / последней строками и краями содержимого flex-контейнера составляло половину от расстояния между строками. stretch Значение по умолчанию. Строки flex-элементов равномерно растягиваются, заполняя все доступное пространство. Если оставшееся свободное пространство отрицательно, это значение идентично flex-start . В противном случае свободное пространство будет разделено поровну между всеми строками, увеличивая их поперечный размер. initial Устанавливает значение свойства в значение по умолчанию. inherit Наследует значение свойства от родительского элемента. 
align-content: center; align-content: flex-start; align-content: flex-end; align-content: space-between; align-content: space-around; align-content: stretch; align-content: inherit; align-content: initial;flex
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020 .
Описание
Свойство CSS flex — это сокращённое свойство, определяющее способность гибкого элемента растягиваться или сжиматься для заполнения собой доступного свободного пространства. Это свойство устанавливает flex-grow, flex-shrink и flex-basis.
- flex-grow : 0
- flex-shrink : 1
- flex-basis : auto
- flex-grow : как указано
- flex-shrink : как указано
- flex-basis : как указано, но с относительной длиной, конвертируемой в абсолютные длины
- flex-grow : число
- flex-shrink : число
- flex-basis : длина, проценты или calc();
Синтаксис
/* 0 0 auto */ flex: none; /* Одно значение, число без единиц: flex-grow */ flex: 2; /* Одно значение, ширина/высота: flex-basis */ flex: 10em; flex: 30%; flex: min-content; /* Два значения: flex-grow | flex-basis */ flex: 1 30px; /* Два значения: flex-grow | flex-shrink */ flex: 2 2; /* Три значения: flex-grow | flex-shrink | flex-basis */ flex: 2 2 10%; /* Глобальные значения */ flex: inherit; flex: initial; flex: unset;
Значения
Определяет flex-basis для флекс элемента. Любое корректное значение для высоты(height) и ширины(width) — корректно и для данного свойства. Предпочтительный размер 0 должен иметь единицу измерения, чтобы не восприниматься как гибкий. Значение по умолчанию 0% , если не указано.
Размер элемента устанавливается в соответствии с его свойствами width и height . Он полностью негибкий: не сжимается и не увеличивается по отношению к гибкому контейнеру. Эквивалентно значению » flex: 0 0 auto «.
Формальный синтаксис
flex =
none | (en-US)
[ (en-US) ? (en-US) || (en-US) ] (en-US)Пример
#flex-container display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; > #flex-container > .flex-item -webkit-flex: auto; flex: auto; > #flex-container > .raw-item width: 5rem; >div id="flex-container"> div class="flex-item" id="flex">Flex box (click to toggle raw box)div> div class="raw-item" id="raw">Raw boxdiv> div>
var flex = document.getElementById("flex"); var raw = document.getElementById("raw"); flex.addEventListener("click", function () raw.style.display = raw.style.display == "none" ? "block" : "none"; >);
#flex-container width: 100%; font-family: Consolas, Arial, sans-serif; > #flex-container > div border: 1px solid #f00; padding: 1rem; > #flex-container > .raw-item border: 1px solid #000; >Результат
Спецификации
Specification CSS Flexible Box Layout Module Level 1
# flex-property