Подковообразная болезнь | Расскажите о макетах Flex, которые вы, возможно, не полностью понимаете

Многие статьи о флекс-верстке — это сухие чаты одного атрибута, немного похожие на проверку аккаунта на свидании, скучные и неинтересные.

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

Эта статья посвящена созданию карты Китая с помощью Flex-макета.

Эта статья является одной из серии статей о "подковообразных·Flex Special", и в будущем будут опубликованы дополнительные специальные темы.

Адрес GitHub (постоянно обновляется):horseshoe

Адрес блога (вёрстка статьи очень красивая):matiji.cn

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

Flexbox называется моделью эластичного блока, и сценарии его использования в основном представляют собой экранно-адаптивную компоновку и замену плавающей компоновки.

Детальное знание требует большой практики, а систематическое знание требует реального понимания системы. Я думаю, что Flexbox — это системное знание. Поэтому эта статья начинается с концепции и направлена ​​на то, чтобы у разработчиков был целый мир в их сердцах, пока они прочтут ее один раз.

1D макет макета

ты, черт возьми, может быть三体Подробнее, что такое одномерная модель компоновки?

Проще говоря, одномерная модель компоновки представляет собой主轴Когда направление определено, только行,нет列.

Каковы знакомые двухмерные модели компоновки? имеютdisplay: tableа такжеdisplay: grid. И о чем мы сегодня поговоримdisplay: flexЭто правильная одномерная модель компоновки.

Смотрите прямо на картинку.

Как видите, Flexbox имеет行понятие, но не列Концепция чего-либо. Это приводит к его ограниченной выразительности.

концепция

Как мы определяем, что короткая строка на китайском языке一или арабские цифры1Шерстяная ткань?

Вы можете подумать, что я шучу. На первый взгляд горизонтальный не китайский.一, по вертикали это не арабские цифры1какие.

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

То же самое верно и для Flexbox. Это одномерная модель макета, и мы собираемся найти линию, определяющую единственное измерение.

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

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

Это также приводит ко второй концепции Flexbox: гибкий контейнер (flex container) и гибкий элемент (flex item).

Под эластичным контейнером можно понимать Берлин времен холодной войны, а международные политические силы всех партий, естественно, представляют собой ряд эластичных проектов. Что собираются обсудить несколько крупных международных хулиганов? Конечно, есть собрание, чтобы обсудить, как поделить Берлин. Да, модель flexbox обсуждает горячую тему о том, как flex-элементы делят flex-контейнеры.

Как мы упоминали в предыдущем разделе, Flexbox — это одномерная модель макета. В результате Flexbox имеет行понятие, но не列Концепция чего-либо.

Так приводит к третьему понятию Flexbox: линия (линия).

Смотрите прямо на картинку.

Минимальная длина

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

Например.

.container {
    display: flex;
    width: 850px;
    padding: 5px;
}
.container .item {
    width: 200px;
    height: 50px;
    margin: 5px;
}
.container .item:nth-child(2) {
    width: 1000px;
}

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

Что за желтая часть? является гибким контейнеромpaddingи гибкие элементыmargin. Мы все знаем блочную модель, кромеpadding,marginа такжеborderКроме того, это толькоcontentуже?

Мы можем смело предположить, что Flexbox только осмеливается запугивать блочную модель.content, остальные дяди, обидеть не могут.

Не волнуйтесь, давайте проверим еще раз.

.container {
    display: flex;
    width: 850px;
    padding: 5px;
}
.container .item {
    width: 200px;
    height: 50px;
    margin: 5px;
}
.container .item:nth-child(2) {
    width: 1000px;
    padding: 0 450px;
}

Это теперь ясно? первого гибкого элементаcontentДлина стала 0, вторая ненамного лучше, т.к. длина коробкиpaddingзанимать, егоcontentДлина на самом деле также равна 0. Они выдавили людей из бизнеса, но другие атрибуты они вообще не смеют трогать, и они снобы.

Давайте рассмотрим еще один интересный пример.

.container {
    display: flex;
    width: 850px;
    padding: 5px;
}
.container .item {
    width: 200px;
    height: 50px;
    margin: 5px;
}
.container .item:nth-child(2) {
    width: 1000px;
    padding: 0 300px;
}
.container .item .inner {
    width: 500px;
    height: 100%;
}

Я поместил long во второй гибкий элемент500pxэлемент, и угадайте, что, гибкий элементpaddingНекоторые из них перекрываются элементами. Даже дочерние элементы не сохраняются.

В общем, коробочная модельcontentВсе они поддерживаются словами, так что давайте, наконец, посмотрим на ситуацию со словами.

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

В случае, когда ширина не объявлена ​​явно, ширина текста равна ширине модели блока flex-элемента.content, Flexbox этого не выдержит.

Подводя итог: Flexbox будет сжимать гибкие элементы только тогда, когда не хватает свободного места.content, остальное какpadding,marginа такжеborderсовершенно не влияет. При этом Flexbox не будет сжимать текст, если flex-элемент не имеет явно объявленной ширины.

display

Отсюда мы поговорим о конкретных свойствах CSS.

displayЕсть два свойства, связанные с Flexbox:display: flexа такжеdisplay: inline-flex.

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

flex-direction

Это свойство объявляет ориентацию и ориентацию главной оси.

Во-первых, главный вал не обязательно горизонтальный, если главный вал переключить, то все изменится.

Во-вторых, есть две части информации, объявленные главной осью, а именно:

• Он горизонтальный или вертикальный?
• Это слева направо или справа налево в горизонтальном или вертикальном измерении?

Таким образом, здесь также задействованы четыре значения атрибута.

.container {
    flex-direction: row(default) | row-reverse | column | column-reverse;
}

flex-wrap

Это свойство объявляет, что когда элемент в контейнере не может уместиться в одну строку, разрешить ли всем сжать его или завернуть.

Фактически, он также содержит две части информации:

• Вы хотите завернуть?
• Если требуется разрыв строки, он образует несколько строк. Несколько строк расположены сверху вниз или снизу вверх?

.container {
    flex-wrap: nowrap(default) | wrap | wrap-reverse;
}

если поставитьflex-directionа такжеflex-wrapВ сочетании, все будут сбиты с толку? Вверх и вниз, влево и вправо. На самом деле, как бы это ни было наоборот,flex-directionПеревернутое направление главной оси,flex-wrapИзмените направление поперечной оси.

Ухватитесь за некоторые концептуальные вещи, и вы не будете сбиты с толку.

flex-flow

Это свойство коллекции, которое можно определить одновременноflex-directionа такжеflex-wrap.

То есть это одно свойство может объявить характеристики главной оси и поперечной оси в одном месте.

.container {
    flex-flow: row-reverse wrap-reverse;
}

justify-content

Это свойство определяет, как элементы в каждой строке выравниваются по горизонтали.

Думайте об элементах в строке гибкого контейнера как о строке встроенных элементов.justify-contentа такжеtext-alignСпособ питания тот же.

.container {
    justify-content: flex-start(default) | flex-end | center | space-between | space-around | space-evenly;
}

flex-start,flex-endа такжеcenterОчень выразительно, давай нажмем без стола.

Объясните следующие три значения атрибута:

• space-betweenУказывает, что элементы на обоих концах выровнены со стенками контейнера, а пространство между элементами распределено равномерно. Так называемыйbetweenТо есть между проектами.
• space-aroundУказывает, что между элементами на двух концах и стенкой контейнера сохраняется зазор в одну единицу, а между элементами сохраняется зазор в две единицы.aroundв переводе на китайский есть周围, что означает, что зазоры слева и справа от каждого элемента распределены поровну.
• space-evenlyЗазор между элементами, представляющими два конца и стенку контейнера, и зазор между элементами остаются за единицу.evenlyв переводе на китайский есть均匀, что означает, что все пустоты распределены поровну.

align-items

Это свойство определяет, как элементы в каждой строке выравниваются по вертикали.

.container {
    align-items: stretch(default) | flex-start | flex-end | center | baseline;
}

Здесь есть проблема, если flex-элемент явно объявляет высоту, тоstretchбольше не будет работать. Итак, в приведенном здесь примере я добавил подэлемент к элементу и явно объявил высоту подэлемента, чтобы высота элемента была растянута.

<div class="container">
    <div class="item"><div class="inner">1</div></div>
    <div class="item"><div class="inner">2</div></div>
    <div class="item"><div class="inner">3</div></div>
</div>

Как видите, по умолчанию эластичные элементы в строке будут растягиваться, что эквивалентно объявлению высоты100%. Растяжение больше не работает, если элемент имеет явную высоту.

align-content

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

.container {
    align-content: stretch(default) | flex-start | flex-end | center | space-between | space-around | space-evenly;
}

То же самое верно и здесь, если flex-элемент явно объявляет высоту, тоstretchбольше не будет работать.

Одновременно следует отметить две вещи:

• В эластичном контейнере нужно явно объявлять высоту, причем высота должна быть больше суммы высот всех строк, иначе откуда возьмется лишнее пространство?
• Если в контейнере всего одна строка, то есть разрывы строк не требуются или не допускаются, тоalign-contentАтрибут не подействует, потому что он действует на линию, и только одна линия осмеливается призвать Лао-цзы к бегству?

почему бы нетjustify-items

Если вы также понимаетеdisplay: flexа такжеdisplay: grid, может быть, вы обнаружите, что у них есть обаxx-itemsа такжеxx-contentАтрибуты. Но не волнуйтесь, углубитесь и обнаружите, что во Flexbox не хватает одного.justify-items.

Давайте сначала объясним.xx-itemsа такжеxx-contentКакая разница в объеме.

• xx-itemsПо проекту смысл понятен.
• xx-contentДля чего это? Определенно больший блок, чем товар, снова Lenovo Flexboxalign-contentдействует на ряд, мы можем сделать смелое предположениеxx-contentПрименяется к строкам или столбцам.

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

Вы ошибаетесь, поскольку во Flexbox нет понятия столбцов, в нем не должно бытьjustify-contentсвойства, но должны иметьjustify-itemsимущество?

К слову сказать, я тоже так думал.

Но тогда подумайте об этом, Flexboxalign-itemsобъявляет, как элементы в строке выравниваются по вертикали, в отличие отjustify-itemsОбъявление должно указывать на то, как элементы в столбце выравниваются по горизонтали. Это кажется более возмутительным. И если вы рассматриваете каждый элемент в строке гибкого контейнера как столбец,justify-contentКажется, это имеет смысл.

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

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

order

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

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

Это в основном зарезервировано для JavaScript для динамического управления порядком проекта.Хорошо изменить порядок исходного кода напрямую без динамического.

.item {
    order: <integer>; /* default is 0 */
}

flex-grow

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

Для значений атрибутов допускаются только положительные целые числа.

.item {
    flex-grow: <number>; /* default is 0 */
}

Сначала объясните, что такое свободное пространство: это горизонтальное пространство, оставленное в строке в соответствии с общими ограничениями правил гибкого контейнера и явной шириной или содержимым элемента гибкости. Например, удалить из легендыmargin,paddingжелтая часть.

Как распределяется лишнее место в строке?

Во-первых, для программы flex требуется приложение. Например, первый проект, предложенныйflex-grow: 1, Это означает, что ему требуется избыточное пространство. Как лишнее пространство это количество пикселей, это еще не точно.

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

Наконец, в соответствии с количеством заявок, поданных каждым человеком, выделяется свободное место.

Только когда в строке есть лишнее место,flex-growсвойства вступят в силу. Когда встроенное пространство было разделено заранее или даже недостаточно, этот атрибут нельзя контролировать.

flex-shrink

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

Для значений атрибутов допускаются только положительные целые числа.

.item {
    flex-shrink: <number>; /* default is 1 */
}

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

Правило обязательного разделения пространства в строках и разделения поля на полях по сути является одним и тем же правилом.

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

После заполнения всех заявок будет подсчитано общее количество заявок.

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

• Флекс-контейнер будет сжимать только флекс-элементcontent, остальное какpadding,marginа такжеborderНе пострадал.
• Если гибкий элемент имеет текст или дочерние элементы фиксированной ширины, возможны два случая. Во-первых, сам элемент явно не объявляет ширину, тогда минимальная длина зависит от длины дочернего элемента; во-вторых, сам элемент явно объявляет ширину, тогда минимальная длина зависит от длины дочернего элемента. дочерний элемент, но не может превышать длину элемента его собственной ширины. В сочетании с двумя последними примерами в приведенной выше легенде его легче понять (я знаю, что вы уже запутались).

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

Зачемflex-growЗначение свойства по умолчанию равно 0, аflex-shrinkЗначение свойства по умолчанию равно 1?

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

Вы можете разместить все предметыflex-shrinkЗначение атрибута установлено в 0, чтобы все предметы были железными и не боялись власти. См. четвертый пример в легенде выше.

flex-basis

Это свойство объявляет длину, предварительно выделенную для гибкого элемента. этоwidthАльтернативы свойствам, соотношение приоритетовwidthвысоко.

.item {
    flex-basis: <length> | auto; /* default is auto */
}

еслиwidthа такжеflex-basisОба явно объявляют не-autoзначение, тоflex-basisболее высокий приоритет. В противном случае то, что явно объявлено, имеет приоритет.

Не совсем понятноflex-basisЧто означает стандарт атрибута.

Разница кажется ограниченной случаем, когда значение атрибута равно 0.width: 0Мы все знаем, что представление не имеет ширины, см. второй пример легенды выше; в то время какflex-basis: 0Указывает, что ширина содержимого равна ширине, см. третий пример в легенде выше.

flex

Это свойство коллекции, которое можно определить одновременноflex-grow,flex-shrinkа такжеflex-basis.

Вы можете агрегировать значения трех свойств, а можете просто написатьflex-growЗначение атрибута.

.item {
    flex: <'flex-grow'> | <'flex-grow'> <'flex-shrink'> <'flex-basis'>;
}

align-self

Это свойство объявляет вертикальное выравнивание самого гибкого элемента в строке.

«Я это я, разноцветный фейерверк».

.item {
    align-self: auto(default) | stretch | flex-start | flex-end | center | baseline;
}

КромеautoПомимо,align-selfзначение атрибута иalign-itemsЗначения свойств те же, и эффект тот же.

align-items: autoЭто означает, что я подчиняюсь коллективу по умолчанию и не делаю этого сам, поэтому и так много значений атрибутов.

зачемalign-selfатрибут безjustify-selfхарактеристики?

Мы обсуждали этот вопрос? потому что безjusifty-itemsимущество, поэтомуjustify-selfО свойствах также не может быть и речи.

Видишь ли, у Грида это есть.justify-selfАтрибуты.

разное

есть небольшая играFlexbox FroggyМожет помочь вам легко попрактиковаться в различных функциях Flexbox.

Эта статья является одной из серии статей о "подковообразных·Flex Special", и в будущем будут опубликованы дополнительные специальные темы.

Адрес GitHub (постоянно обновляется):horseshoe

Адрес блога (вёрстка статьи очень красивая):matiji.cn

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