Оригинальный гибкий макет может быть таким тонким?

Введение:

Гибкая компоновка (Flexible layout, гибкая компоновка) — метод компоновки, часто используемый при разработке апплетов.
Элементы с включенной гибкой компоновкой называютсяflex container

flex containerНепосредственные дочерние элементы внутри называютсяflex items(То есть первый слой дочерних элементов, завернутый в блок с включенным гибким макетом)
Задайте для свойства display значение flex илиinline-flexВы можете включить гибкий макет, чтобы статьflex container

Разница между значениями свойств, установленными на flex и inline-flex:

Если значение, соответствующее display, равно flex, тоflex containerдаblock-levelсуществует в виде элемента блочного уровня
Если значение отображения установлено наinline-flex, тогдаflex containerдаinline-levelсуществует в виде встроенного блочного элемента

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

Например: наборы родительских элементовdisplay: flex, даже если дочерний элемент установленdisplay：blockилиdisplay：inlineАтрибут, дочерний элемент по-прежнему будет вести себя как встроенный блочный элемент, это влияние родительского элемента на него, так что влияние атрибута отображения на самого себя недопустимо;

Но почему мы говорим, что его влияние на контент все еще существует? Если родительский и дочерний элементы установленыdisplay: flex, то сам дочерний элемент по-прежнему является элементом уровня строки и не станет элементом уровня блока, поскольку для него включена гибкая компоновка, но на содержимое дочернего элемента по-прежнему будет влиять его гибкая компоновка и различные flex-специфические свойства вступят в силу;

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

Свойства CSS, применяемые к контейнеру flex

flex-flow

felx-flowдаflex-direction || flex-wrapАббревиатура этого атрибута очень гибкая, вы можете написать только один атрибут, вы можете написать оба или даже поменять порядок до и после.
flex-flow：column wrap === flex-direction：column；flex-wrap：wrap

Если записано значение только одного атрибута, то другой атрибут напрямую принимает значение по умолчанию;flex-flow：row-reverse === flex-direction：row-reverse；flex-wrap：nowrap;

flex-direction

flex itemsПо умолчанию вдольmain axis(веретено) изmain startначатьmain endОриентированный

flex-directionОпределяет направление главной оси, имеется четыре значения
соответственноrow(по умолчанию),row-reverse,column,column-reverse

Уведомление:flex-directionне прямое изменениеflex items, он просто косвенно изменил порядок, изменив направление главной оси

значение атрибута	основной пуск (начальное положение шпинделя)	основной конец (конечное положение главного вала)	Направление шпинделя
ряд (по умолчанию)	Осталось	правильно	-------->
row-reverse	правильно	Осталось	<--------
column	начальство	Вниз	Сверху донизу
column-reverse	Вниз	начальство	снизу вверх

flex-wrap

flex-wrap может определить, отображаются ли гибкие элементы в одной строке или в нескольких строках.

nowrap (по умолчанию): одиночный

В этом примере ширина родительского блока составляет 500 пикселей, а дочернего блока — 100 пикселей; при добавлении нескольких дочерних блоков и установке свойства flex-wrap:nowrap для родительского блока эффект будет таким, как показано ниже:

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

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

перенос: несколько строк

Расположение элементов после переноса строк сильно зависит от направления поперечной оси, а направление расположения совпадает с направлением поперечной оси;

Используется только что приведенный пример, но теперь для свойства flex-wrap задано значение wrap, и эффект показан на следующем рисунке:

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

wrap-reverse: многострочный (по сравнению с переносом, перекрестное начало противоположно поперечному концу), этот метод может сделать начальную и конечную точки поперечной оси противоположными, так что общий макет будет обратным

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

justify-content

Совет: В серой части следующих изображений нет элементов, а область с другими цветами — это область содержимого коробки

justify-content определяет выравнивание flex-элементов по главной оси, всего с 6 значениями свойств:

flex-start (по умолчанию): выравнивание с основным началом в направлении главной оси

flex-end: совместить с основным концом в направлении главной оси

Центр: Центр выравнивание в направлении основных осей

space-between

Функции:

Совместите оба конца с основным началом и основным концом
одинаковое расстояние между гибкими элементами

space-evenly

Функции:

одинаковое расстояние между гибкими элементами
Расстояние между гибкими элементами и основным началом, основным концом равно расстоянию гибких элементов.

space-around

Функции:

одинаковое расстояние между гибкими элементами
Расстояние между гибкими элементами и основным началом, основным концом равно половине расстояния гибких элементов.

align-items

align-itemsРешенныйодна линияflex itemsВыравнивание по поперечной оси

Примечание. Пока главная ось горизонтальна, независимо от того,flex-directionНастраиватьrowещеrow-reverse, все оси пересечения направлены сверху вниз;

Пока главная ось продольная, неважноflex-directionустановленcolumnещеcolumn-reverse, ось пересечения слева направо;

То есть: главных осей может быть четыре, а поперечных только две.

Это свойство имеет следующие значения свойств:

растянуть (по умолчанию): когдаflex itemsКогда размер в направлении поперечной оси (относительно ширины или высоты, определяемой направлением поперечной оси) установлен автоматически, он автоматически растягивается до заполнения; но еслиflex itemsразмер неauto, то эффект такой же, как и при настройкеflex-startТакой же

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

flex-start: согласование с перекрестным стартом

гибкий конец: совместить с поперечным концом

центр: выравнивание по центру

базовая линия: выравнивание с базовой линией

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

Уведомление:align-itemsЗначение по умолчанию такое же, какjustify-contentотличается от значения по умолчанию, это неflex-start, ноstretch

align-content

align-contentРешенныйМногострочныйflex-itemsВыравнивание по главной оси, использование такое же, какjustify-contentАналогично, со следующими значениями свойств
stretch(по умолчанию),flex-start,flex-end,center,space-bewteen,space-around,space-evenly

Большинство значений атрибутов должно быть понятно, глядя на картинку, в основном, чтобы сказатьstretch,когдаflex itemsРазмер в направлении поперечной оси установлен наautoПосле этого сумма высот многострочных элементов заполнит родительское поле, а их высоты будут поделены поровну, что аналогичноalign-itemsизstretchАтрибуты немного отличаются.Последний заключается в том, что размер каждого элемента будет заполнять родительское поле, в то время как первый делится поровну.

Свойства CSS, применяемые к flex-элементам

flex

flex — это flex-grow flex-shrink? || Сокращение для flex-basis, указывающее, что значение свойства flex может быть равно единице, двум или трем, а остальные значения являются значениями по умолчанию.
По умолчанию flex: 0 1 auto (не увеличивает, а сжимает)
none: 0 0 auto (ни увеличение, ни уменьшение)
авто: 1 1 авто (увеличение и уменьшение)
Но его сокращения различны, но мы используем наиболее flex: n; возьмем «каштан»: если flex — неотрицательное целое число n, число представляет собой значение flex-grow, соответствующее flex-shrink по умолчанию равное 1, но обратите особое внимание: значение flex-basis здесь не является значением по умолчанию auto, а изменено на 0%, то есть flex: n === flex: n 1 0%, поэтому мы обычно используем flex: 1 -- > flex: 1 1 0%; на следующем рисунке показаны все случаи сокращения flex:

flex-grow

flex-growРешенныйflex-itemsКак масштабировать
Вы можете установить любое неотрицательное число (целое положительное, положительное десятичное, 0),Значение по умолчанию равно 0

только тогда, когдаflex containerЭто свойство вступит в силу только тогда, когда на главной оси останется размер.
я упалflex itemsизflex-growСумма значений атрибутов превышает 1, и каждыйflex itemРасширенный размерflex container剩余size * flex-grow / sum
Используя предыдущую формулу расчета, мы можем получить: когдаflex itemsизflex-growКогда сумма суммы значений атрибутов не превышает 1, общая длина расширения равна оставшемуся размеру * сумме, но сумма меньше 1, поэтому конечные гибкие элементы не могут полностью заполнить контейнер felx.

<style>
  .box {
    display: flex;
    align-items: center;
    width: 500px;
    height: 500px;
    background-color: aquamarine;
  }
  .item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    font-size: 34px;
    color: white;
  }
  .item:nth-child(1) {
    flex-grow: 1;
    background-color: bisque;
  }
  .item:nth-child(2) {
    flex-grow: 1;
    background-color: #f8f;
  }
  .item:nth-child(3) {
    flex-grow: 1;
    background-color: #ccc;
  }
</style>

я упалflex itemsизflex-growСумма значений атрибутов не превышает 1, и каждыйflex itemРасширенный размерflex container剩余size * flex-grow

<style>
	.item:nth-child(1) {
    flex-grow: 0.1;
    background-color: bisque;
  }
  .item:nth-child(2) {
    flex-grow: 0.2;
    background-color: #f8f;
  }
  .item:nth-child(3) {
    flex-grow: 0.3;
    background-color: #ccc;
  }
</style>

Примечание: не думайтеflex itemРасширенные значения соответствуютflex-grow/sumраспределить долюflex-growявляется десятичной дробью, считается, что место, отведенное под нее, является остаткомsize*flex-grow, это неточно. Когда вы видите, что гибкий элемент использует это свойство, первое, что нужно решить, это то, больше ли сумма 1, а затем решить, какой метод использовать для вычисления отношения

Окончательный размер развернутых flex-элементов не может превышать max-width/max-height.

<style>
	.item:nth-child(1) {
    flex-grow: 1;
    max-width: 150px; // 当设置了max-width之后，就算flex-grow生效且分配到的空间加上原空间大于max-width，但是最多宽度也只能到max-width的大小
    background-color: bisque;
  }
  .item:nth-child(2) {
    background-color: #f8f;
  }
  .item:nth-child(3) {
    background-color: #ccc;
  }
</style>

flex-basis

flex-basisустанавливатьflex itemsсуществуетшпиндельБазовый размер в направлении, позжеflew-growа такжеflex-shrinkБазовый размер, необходимый для расчета, таков:
auto (значение по умолчанию), content: в зависимости от размера самого контента эти два свойства можно считать имеющими одинаковый эффект, конечно, вы также можете установить определенные значения и проценты (рассчитанные в соответствии с пропорцией родительский блок)

Принимать решениеflex itemsПриоритет окончательного фактора размера базыmax-width/max-height/min-width/min-height > flex-basis > width/height > 内容本身的size
можно понимать как предоставлениеflex itemsЕсли свойство Flex-Pass установлено, и значение свойства является определенным значением или процентом, соответствующий размер (ширина / высота) на главной оси не будет работать.

flex-shrink

flex-shrinkРешенныйflex itemsкак уменьшить
Вы можете установить любое неотрицательное число (положительное десятичное, положительное целое, 0), значение по умолчанию 1

когдаflex itemsпревышает в направлении главной осиflex containerПосле размераflex-shrinkсвойства вступят в силу
Примечание: сflex-growразные, вычислить каждыйflex itemУменьшенный размер рассчитывается по одной и той же формуле, а масштаб рассчитывается по-разному.

Коэффициент усадки =flex-shrink * flex item的base size, базовый размерflex itemположить вflex containerпредыдущий размер
каждыйflex itemРазмер усадкиflex items超出flex container的size * 收缩比例 / 所有flex items 的收缩比例之和

flex itemsОкончательный размер после усадки не может быть меньшеmin-width/min-height
Резюме: когда сумма значений свойства flex-shrink flex-элементов меньше 1, из формулы расчета размера сжатия видно, что общее расстояние сжатия равно избыточному размеру * сумме, поскольку сумма равна меньше 1, то независимо от того, подблок не будет полностью сжиматься до расстояния, которое превышает, то есть дочерние элементы обязательно превысят расстояние без переноса

<style>
  .item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 1;
    height: 100px;
    font-size: 34px;
    color: white;
  }
  .item:nth-child(1) {
    width: 100px;
    background-color: bisque;
  }
  .item:nth-child(2) {
    width: 110px;
    background-color: #f8f;
  }
  .item:nth-child(3) {
    width: 120px;
    background-color: #ccc;
  }
  .item:nth-child(4) {
    width: 130px;
    background-color: yellowgreen;
  }
  .item:nth-child(5) {
    width: 140px;
    background-color: green;
  }
  .item:nth-child(6) {
    width: 150px;
    background-color: blue;
  }
  .item:nth-child(7) {
    width: 160px;
    background-color: red;
  }
</style>

Значение сжатия различных блоков связано с его собственным свойством flex-shrink, а также с его собственной исходной шириной, которая является самым большим отличием от flex-grow.

order

orderРешенныйflex itemsпорядок расположения
Может быть установлено любое целое число (положительное целое, отрицательное целое, 0), чем меньше значение, тем выше рейтинг

Значение по умолчанию равно 0, когдаflex itemsизorderКогда они согласованы, они располагаются в порядке рендеринга.

<style>
  .item:nth-child(1) {
    background-color: bisque;
  }
  .item:nth-child(2) {
    order: 2;
    background-color: #f8f;
  }
  .item:nth-child(3) {
    order: -1;
    background-color: #ccc;
  }
 </style>

align-self

flex itemsв состоянии пройтиalign-selfпокрытиеflex containerЗадаватьalign-items
По умолчаниюauto: соответствие по умолчаниюflex containerизalign-itemsнастраивать

stretch,flex-start,flex-end,center,baseline, эффект естьalign-itemsПоследовательный, проще говоря,align-itemsкакие свойства,align-selfКакие свойства есть, кроме конечно авто

.item:nth-child(2) {
    align-self: flex-start;
    background-color: #f8f;
 }

Поиск проблемы:

У вас есть какие-либо сомнения, когда вы видите изображение с переносом строки в flex-wrap, почему элемент с переносом строки не находится рядом с элементом на предыдущей строке? Это немного похоже на то, чтобы быть в середине

Конечно, подумайте о том, на какой атрибут опираются многострочные элементы, чтобы расположить их на поперечной оси.align-contentТеперь, каково его значение свойства по умолчанию? ---> растянуть

Да, потому что значение по умолчанию — «растянуть», ноflex itemВысота устанавливается снова, поэтому flex-элементы не будут растягиваться, а будут располагаться в том положении, в котором будут растягиваться; мы можем проверить это, поместивflex-itemsПосле того, как размер на поперечной оси установлен на автоматический, значение атрибута растяжения будет более очевидным, и оно будет разделено поровну.flex-containerВысота по главной оси, позиция каждого элемента - позиция предыдущего изображения