HTML\CSS → CSS Flexbox краткое руководство
Flexbox (“флексбокс”) — CSS-механизм, предназначенный для построения сеток и создания сложных раскладок блоков.
На текущий момент поддержка флексбокса в современных браузерах довольно хорошая, его смело можно использовать уже сейчас.
Свойство display: flex делает эелемент флекс-контейнером, прямые потомки (первого уровня вложенности) превращаются вофлекс-элементы.
Свойство flex-direction “Главная ось”
Свойство flex-direction — задает направление главной осифлекс-контейнера. Принимает значения:
row — главная ось направлена слево направо (по умолчанию);
column — главная ось направлена сверху вниз;
row-reverse — главная ось направлена справа налево;
column-reverse — главная ось направлена снизу вверх;
Флекс-элементы всегда располагаются вдоль главной оси.
Существует также направление поперечной оси, вдоль этой оси рассчитывается высота элементов и вертикальные выравнивания. Поперечная ось всегда перпендикулярна главной оси. Если главная ось направлена горизонтально ( row или row-reverse ), то поперечная ось — смотрит вниз; если главная ось направлена вертикально ( column или column-reverse ) — то поперечная ось смотрит направо. Поперечная ось никогда не смотрит вверх или влево. Свойства для поворота поперечной оси нет.
Свойство justify-content “Выравнивание по горизонтали”
Свойство justify-content — определяет выравнивание вдоль главной оси и при этом не меняет порядок элементов, как это происходит при изменении направления оси. Элементы просто прижимаются к началу, концу, средине или по ширине главной оси. Возможные значения:
flex-start — элементы располагаются в начале главной оси (по умолчанию);
flex-end — элементы располагаются в конце;
center — элементы располагаются по центру;
space-between — элементы выравниваются по ширине, расстояния между соседними элементами — динаковые, а от краевотступов нет;
space-around — элементы выравниваются по ширине, расстояния между соседними элементами — одинаковые, но между элементами и краями есть отступы (равные половине расстояния между соседними элементами).
Свойство align-items “Выравнивание по вертикали”
Свойство align-items — определяет выравнивания вдоль поперечной оси. Значения:
stretch — элементы растянутся на всю «высоту» контейнера (по умолчанию);
flex-start — элементы располагаются в начале поперечной оси;
flex-end — элементы располагаются в конце;
center — элементы выравниваются по центру;
baseline — элементы выравниваются по базовой линии(находятся на «одной строке»), эта воображаемая линия проходит по нижней части текста;
Флекс-элементы по умолчанию растягиваются на всю высоту контейнера. Если у элемента задана высота ( height ), то растягиваться он не будет.
Свойство align-self “Эгоистичное выравнивание”
Свойство align-self — позволяет задавать элементам разноепоперечное выравнивание и задается для конкретных элементов, а не всео контейнера. Значения:
stretch — элемент растягивается на всю «высоту» контейнера (по умолчанию);
flex-start — элемент располагается в начале поперечной оси;
flex-end — элемент располагаются в конце;
center — элемент выровнивается по центру;
baseline — элемент выравнивается по базовой линии, эта воображаемая линия проходит по нижней части текста;
Свойство flex-wrap “Перенос”
Свойство flex-wrap — управляет переносом элементов на новую строку. Значения:
nowrap — перенос элементов на новую строку запрещен (по умолчанию). Элементы будут сжаты до минимально возможной ширины (даже если задать ее явно), затем выйдут за пределы контейнера располагаясь в один ряд;
wrap — перенос разрешен;
wrap-reverse — перенос разрешен, но ряды будут располагатьсяв обратном порядке (относительно поперечной оси);
Свойство align-content “Распределение рядов”
Свойство align-content — управляет выравниванием рядоввдоль поперечной оси. Отличие от align-items в том, что свойствовлияет на ряды, а не на отдельные элементы. Значения:
stretch — ряды растягиваются по всей поперечной оси (по умолчанию);
flex-start — ряды располагаются в начале поперечной оси;
flex-end — ряды располагаются в конце поперечной оси;
center — ряды располагаются по центру поперечной оси;
space-between — ряды выравниваются по ширине, расстояния между соседними рядами — динаковые, а от краев отступов нет;
space-around — ряды выравниваются по ширине, расстояния между соседними рядами — одинаковые, но между рядами и краями есть отступы.
Свойство order “Порядковый номер”
Свойство flex-basis “Базовый размер”
Если главная ось направлена горизонтально, то главный размер — это ширина ( width ), а поперечный размер — это высота ( height ). Если главная ось направлена вертикально, то все наоборот.
Базовый размер — это исходный размер флекс-элементов до применения flex-grow.
Свойство flex-grow “Коефициент растягивания”
Свойство flex-grow — задает коефициент растягивания (будет ли растягиваться элемент на свободное пространство), принимает неотрицательные числовые значения (по умолчанию — 0 ). Значение flex-grow: 0 означает, что элемент не будет растягиватьcz на свободное место во флекс-контейнере. Значение flex-grow: > 0 (больше нуля), означает, что элементбудет растягиваться, «захватывая» оставшееся свободное место. Если сразу у нескольких флекс-элементов значение flex-grow больше нуля, то они будут делить свободное место между собой. Свободное место будет добавляться флекс-элементам пропорционально значениям. При этом важно не само значение коэффициента, а его соотношение с коэффициентами остальных элементов, например: 1 и 2 = 1:2, 30 и 40 = 3:4 и т.д.
Рассчитать flex-grow по формуле можно так:
При flex-basis: 0 свободное место будет занимать всю ширину флекс-контейнера, и коэффициенты растягивания будут другими.
На размер оставшегося свободного места влияет не только flex-basis, но и рамки, и отступы. Если flex-basis явно задано нулевое значение, то min-width на размер свободного места влиять не будет, так как ограничения размеров к флекс-элементам применяются уже после перераспределения свободного места.
Свойство flex-shrink “Коефициент сжатия”
Свойство flex-shrink работает схожим образом со свойством flex-grow и задает пропорции, в которых флекс-элементы «впитывают» отрицательное пространство. Чем больше значение свойства у элемента, тем больше отрицательного пространства он «впитает» и тем сильнее сожмется. Доля отрицательного пространства, которую «впитает» элемент, зависит от соотношения коэффициента сжатия элемента с коэффициентами других элементов и соотношения базового размера элемента с базовыми размерами других элементов.
Рассчитать flex-shrink по формуле можно так:
Элементы сжимаются в пределах своих базовых размеров, внутренние отступы и рамки не сжимаются. min-width применяется к элементам после этапа перераспределения свободного места или отрицательного пространства.
Cвойство flex “Сокращенная запись”
Свойство flex — является сокращенной записью трех свойтв flex-grow flex-shrink flex-basis (коэффициенты растягивания — коэффициенты сжатия — базовый размер).
Пример значений свойства flex:
При flex-wrap: wrap свойство flex-shrink работает как обычно, но при нехватке места в строке флекс-элементы будут переноситься на новую строку. Для элемента, базовый размер которого больше размера контейнера, будет применсять свойство flex-shrink (единственный случай, когда flex-shrink делает что-то полезное в многострочном контейнере).
В чем разница между align-content и align-items?
Вот пример того, как align-items:center выглядит:
Но align-content для многолинейных гибких коробок. Это не имеет никакого эффекта, когда элементы находятся в одной строке. Он выравнивает всю структуру в соответствии с ее стоимостью. Вот пример для align-content: space-around; : 
А вот как align-content: space-around; с align-items:center внешностью:
Обратите внимание, что 3-й блок и все остальные блоки в первой строке заменяются на вертикально центрированные в этой строке.
Вот несколько ссылок codepen для игры:
Вот очень крутая ручка, которая показывает и позволяет играть практически со всем во flexbox.
Я считаю пример http://flexboxfroggy.com/ очень полезным.
Это займет у вас 10-20 минут, а на уровне 21 вы найдете ответ на свой вопрос. Это упомянуло:
align-content определяет интервал между строками, а align-items определяет, как элементы в целом выровнены внутри контейнера. Когда есть только одна строка, align-content не имеет никакого эффекта
У меня было такое же замешательство. После некоторой обработки, основанной на многих ответах выше, я наконец могу увидеть различия. По моему скромному мнению, различие лучше всего продемонстрировать с помощью гибкого контейнера, который удовлетворяет следующим двум условиям:
Условие 2 помогает мне визуализировать эффекты align-items : оно выравнивает элементы относительно друг друга.
Вот пример кода. Исходные материалы взяты из руководства Уэса Боса по CSS Grid (21. Flexbox против CSS Grid)
Пример 1 : Давайте сузим область просмотра так, чтобы содержимое находилось на одном уровне с контейнером. Это когда align-content: flex-start; не имеет эффекта, так как весь блок контента плотно помещается внутри контейнера (нет дополнительного места для перемещения!)
Эти примеры основаны на flexbox, но те же принципы применимы к сетке CSS. Надеюсь это поможет 🙂
Всё, что нужно знать о выравнивании во Flexbox
Об авторе: Рэйчел Эндрю — не только главный редактор журнала Smashing Magazine, но и веб-разработчик, писатель и спикер. Она автор ряда книг, в том числе The New CSS Layout, один из разработчиков системы управления контентом Perch. Пишет о бизнесе и технологиях на своём сайте rachelandrew.co.uk.
Краткое содержание: в этой статье мы рассмотрим свойства выравнивания во Flexbox и некоторые основные правила, как работает выравнивание по основной и поперечной осям.
История выравнивания во Flexbox
За всю историю CSS правильное выравнивание по обеим осям казалось самой сложной проблемой. Появление этой функции во Flexbox для многих стало главным преимуществом этой технологии. Выравнивание свелось к двум строчкам CSS.
Свойства выравнивания теперь полностью определены в спецификации Box Alignment. Она детализирует, как работает выравнивание в различных макетах. Это означает, что в CSS Grid можно использовать те же свойства, что и в Flexbox — а в будущем в других макетах тоже. Поэтому любая новая функция выравнивания Flexbox будет подробно описана в спецификации Box Alignment, а не в следующей версии Flexbox.
Свойства
Выравнивание главной оси с помощью justify-content
Обратите внимание, что свойство justify-content производит видимый эффект только при наличии свободного места. Поэтому если у вас набор элементов занимает всё пространство на главной оси, justify-content ничего не даст.
Вы можете поиграться со всеми значениями в демо.
Выравнивание по осям с помощью align-content
Затем я могу применить align-content с любым из значений.
Свойство по place-content
Выравнивание по осям с помощью align-items
Теперь мы знаем, что можно выровнять набор элементов или строки как группу. Тем не менее, есть ещё один способ выровнять элементы по отношению друг к другу на поперечной оси. У контейнера есть высота, которая определяется высотой самого высокого элемента.
Как вариант, её можно определить свойством height в контейнере:
Обратите внимание, что в многострочном контейнере каждая строка действует как новый контейнер. Самый высокий элемент в этой строке будет определять размер всех элементов в этой строке.
Значение flex-end перемещает их в конец контейнера по поперечной оси.
Мы также можем выровнять их по базовой линии. Это гарантирует выравнивание текста по одному основанию, в отличие от выравнивания полей вокруг текста.
Все эти варианты можно попробовать в демо.
Индивидуальное выравнивание с помощью align-self
Свойство align-items задаёт выравнивание всех элементов одновременно. В действительности оно устанавливает значения align-self для всех элементов группы. Можно также использовать свойство align-self для любого отдельного элемента, чтобы выровнять его внутри строки и относительно других элементов.
В следующем примере в контейнере используется align-items для выравнивания всей группы по центру, но также align-self для первого и последнего элементов.
Также может быть полезно подумать, как justify-content и align-content работают в CSS Grid Layout. В Grid эти свойства используются для распределения свободного пространства в grid-контейнере между grid-дорожками. Здесь тоже мы берём группу дорожек — и с помощью этих свойств распределяем между ними свободное пространство. Поскольку мы оперируем в группе и в Grid, и во Flexbox, то не можем взять отдельный элемент и сделать с ним что-то другое. Тем не менее, есть способ получить оформление макета, которое хотят верстальщики, когда говорят о свойстве self на главной оси. Это использование автоматических полей.
Использование автоматических полей на основной оси
Если вы когда-нибудь центрировали блок в CSS (например, враппер для контента главной страницы, установив поля слева и справа в auto ), то у вас уже есть некоторый опыт работы с автоматическими полями. Значение auto для полей заполняет максимальное пространство в установленном направлении. Для центрирования блока мы устанавливаем и левое, и правое поля в auto : каждое из них пытается занять как можно больше места, и поэтому помещает наш блок в центр.
Запасное выравнивание
В текущей спецификации вы не можете изменить запасное выравнивание. Есть примечание к спецификациям, которое допускает возможность указания произвольного запасного варианта в будущих версиях.
Безопасное и небезопасное выравнивание
Недавним дополнением к спецификации Box Alignment стала концепция безопасного и небезопасного выравнивания с использованием ключевых слов safe и unsafe.
В следующем коде последний элемент слишком широк для контейнера, а при небезопасном выравнивании и гибком контейнере в левой части страницы элемент обрезается, поскольку переполнение выходит за границы страницы.
Безопасное выравнивание предотвращает потерю данных, перемещая переполнение на другую сторону.
Эти ключевые слова пока поддерживаются не всеми браузерами, однако демонстрируют, как спецификации Box Alignment добавляют контроля во Flexbox.
Заключение
Свойства выравнивания начинались со списка в Flexbox, но теперь обзавелись собственной спецификацией и применяются к другим контекстам макетирования. Вот несколько ключевых фактов, которые помогут запомнить их использование во Flexbox:
В чем разница между align-content и align-items?
Свойство align-items flex-box выравнивает элементы внутри flex-контейнера вдоль поперечной оси так же, как justify-content вдоль главной оси. (Для значения по умолчанию flex-direction: row поперечная ось соответствует вертикали, а главная ось соответствует горизонтальной. При flex-direction: column эти два взаимозаменяемы соответственно).
Вот пример того, как выглядит align-items:center :
Но align-content для многострочных гибких боксов. Это не имеет никакого эффекта, когда элементы находятся в одной строке. Он выравнивает всю структуру в соответствии с ее стоимостью. Вот пример для align-content: space-around; :
А вот как выглядит align-content: space-around; с align-items:center :
Обратите внимание, что 3-й блок и все остальные блоки в первой строке заменяются на вертикально центрированные в этой строке.
Вот несколько ссылок codepen для игры:
Вот супер крутая ручка, которая показывает и позволяет играть практически со всем во flexbox.
Я нахожу пример http://flexboxfroggy.com/ очень полезным.
Это займет у вас 10-20 минут, а на уровне 21 вы найдете ответ на свой вопрос. Это упомянуло:
align-content определяет расстояние между строками, а align-items определяет как элементы в целом выровнены внутри контейнера. Когда есть только одна строка, align-content не имеет никакого эффекта
Ну, я проверил их в моем браузере.
align-items может изменить высоту или положение элементов в области строки. Когда элементы не обернуты, у них есть только одна строка, ее область всегда растягивается до области flex-box (даже если элементы переполняются), и align-content не влияет на одну строку. Таким образом, это не влияет на элементы, которые не обернуты, и только align-items может изменить положение элементов или растянуть их, когда все они находятся в одной строке.
выравнивание-контента
(Представьте, что строки абзаца расположены вертикально, сложены сверху, сложены снизу. Это соответствует парадигме строки flex-direction ).
ALIGN-элементы
align-items управляет поперечной осью отдельной линии гибких элементов.
(Подумайте, как выровняется отдельная строка абзаца, если она содержит обычный текст и более высокий текст, например математические уравнения. В этом случае это будет низ, верх или центр каждого типа текста в строке, которая будет быть выровненным?)
У меня было такое же замешательство. После некоторой обработки, основанной на многих ответах выше, я, наконец, вижу различия. По моему скромному мнению, различие лучше всего продемонстрировать с помощью гибкого контейнера, который удовлетворяет следующим двум условиям:
Условие 2 помогает мне визуализировать эффекты align-items : он выравнивает элементы относительно друг друга.
Вот пример кода. Сырье поступает из Учебное пособие по CSS Grid от Wes Bos (21. Flexbox против CSS Grid)
Пример 1 : Давайте сузим область просмотра, чтобы содержимое находилось на одном уровне с контейнером. Это когда align-content: flex-start; не имеет эффектов, так как весь блок контента плотно помещается внутри контейнера (нет дополнительного места для перемещения!)
Эти примеры основаны на flexbox, но те же принципы применимы к сетке CSS. Надеюсь это поможет 🙂
В чем разница между align-content и align-items?
7 ответов
Свойство align-items flex-box выравнивает элементы внутри гибкого контейнера вдоль поперечной оси, точно так же, как justify-content выполняет вдоль основной оси. (Для значения по умолчанию flex-direction: row поперечная ось соответствует вертикали, а основная ось соответствует горизонтали. С flex-direction: column эти два взаимозаменяются соответственно).
Вот пример того, как выглядит align-items:center :
Но align-content для многострочных гибких ящиков. Это не действует, когда элементы находятся в одной строке. Он выравнивает всю структуру в соответствии с ее значением. Вот пример для align-content: space-around; : 
И вот как выглядит align-content: space-around; с align-items:center : 
Обратите внимание на 3-й ящик, и все остальные поля в первой строке меняют вертикально в эту строку.
Вот несколько кодовых ссылок для игры:
Вот супер классное перо, которое показывает и позволяет играть практически со всеми в flexbox.
Теперь align-content не мешает элементам в строке, но с самими строками. Следовательно, align-content будет пытаться выравнивать строки относительно друг друга и гибкого контейнера.
Ну, я изучил их в своем браузере.
align-items может изменять высоту или положение позиций внутри области линии. Когда элементы не обертываются, у них есть только одна строка, в которой область всегда растягивается до области гибкой коробки (даже если переполнение элементов) и align-content не влияет на одну строку. Таким образом, это не влияет на элементы, которые не завернуты, и только align-items может изменять позиции позиций или растягивать их, когда все они находятся в одной строке.