Полное руководство по изучению макетов CSS [перевод]

контейнер браузер CSS flexbox
Полное руководство по изучению макетов CSS [перевод]

Эта статья взята из очень хорошей обзорной статьи CSS-макетов на SmashingMagazine, в которой обобщаются различные методы CSS-макетов и приводятся ссылки на подробное чтение этих методов. Поэтому я ее перевела и поделилась с вами.Оригинальная ссылка в конце статьи.Спасибо автору Рэйчел Эндрю.

введение

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

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

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

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

1. Обычный документооборот (Обычный поток)

Если вы не откроете веб-страницу, чтобы изменить макет страницы любого CSS, то элементы страницы будут расположены в обычном потоке (нормальном потоке). В обычном потоке элементы блока (боксы) располагаются один после режима записи на основе документа (режим записи). Это означает, что если вы пишете в горизонтальном режиме (предложение слева направо или справа налево), нормальный поток будет выбирать вертикально выровненные блочные элементы страницы.

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

Block and Inline Directions change with Writing Mode

Обычный поток — это самый простой макет: когда вы применяете CSS к документу, создаете некоторый макет CSS, вы фактически позволяете блокам делать «что-то» за пределами обычного потока документа.

1.1. Воспользуйтесь преимуществами обычного потока документов по структуре страниц

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

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

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

1.2. Выйдите из обычного потока документов

Когда у вас есть хорошо структурированная страница, вам нужно решить, как ее взять и превратить в нужный нам макет. Это потребует отхода от нормального потока, который является частью остальной части этой статьи. В нашем распоряжении много «инструментов» компоновки, первый из которыхfloat, что является очень хорошим примером того, что выходит за рамки обычного документооборота.

2. Поплавок

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

Чтобы плавать элемент, установите значение для элементаleftилиrightизfloatАтрибуты. По умолчаниюnone.

.item {
    float: left
}

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

The background color on the content runs under the float

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

<div class="container">
  <div class="item"></div>
  <p>Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut jícama green bean celtuce. </p>
  <p>Grape silver beet  collard greens avocado quandong fennel gumbo black-eyed pea watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach.</p>
</div>

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

p {
  margin: 0 0 1em 0;
}

.container {
  width: 500px;
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
}

.item {
  width: 100px;
  height: 100px;
  float: left;
  margin: 0 20px 20px 0;
  background-color: rgba(111,41,97,.3);
}

2.1. Очистить поплавок

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

Если вы не хотите, чтобы на элемент влиял плавающий элемент перед ним, добавьтеclearхарактеристики. использоватьleftзначение для очистки левого плавающего эффекта,rightЗначение плавает вправо,bothЛевый и правый поплавки очищаются.

.clear {
    clear: both;
}

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

The box around the text does not clear the float

Чтобы избежать этого, нам нужно применитьclearАтрибуты. Мы можем добавить пустой элемент в конец контейнера и установитьclearАтрибуты. Но в некоторых случаях использовать этот способ может быть невозможно (например, некоторые страницы, сгенерированные системой CMS). Таким образом, наиболее распространенный способ очистки плавающих элементов заключается в добавлении псевдоэлемента CSS внутрь контейнера иclearсвойство установлено для обоих.

<div class="container">
  <div class="item"></div>
  <p>Pea horseradish azuki bean lettuce avocado asparagus okra.</p>
</div>

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

p {
  margin: 0 0 1em 0;
}

.container {
  width: 500px;
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
}

.item {
  width: 100px;
  height: 100px;
  float: left;
  margin: 0 20px 20px 0;
  background-color: rgba(111,41,97,.3);
}

.container::after {
  content: "";
  display: table;
  clear: both;
}

example: Smashing Guide to Layout: clearfix on Codepen

2.2 Контекст форматирования блока

Другой способ очистить поплавок — создать BFC внутри контейнера. Элемент BFC полностью оборачивает все элементы в нем, включая внутренние плавающие элементы, гарантируя, что плавающий элемент не выходит за его нижнюю часть. Есть много способов создать BFC, один из наиболее распространенных способов очистить плавающие элементы — установить элементы, отличные от видимых (по умолчанию).overflowстоимость имущества.

.container {
    overflow: auto;
}

использовать как вышеoverflowВ целом действителен. Однако в некоторых случаях это может привести к усечению теней или неожиданным полосам прокрутки. Также это делает ваш CSS менее интуитивным: setoverflowЭто потому, что вы хотите показать полосу прокрутки или просто получить возможность очистить поплавок?

Чтобы сделать цель очистки поплавков более интуитивно понятной и избежать негативных последствий BFC, вы можете использоватьflow-rootтак какdisplayСтоимость имущества.display: flow-rootЕдинственное, что нужно сделать, это создать BFC, избегая, таким образом, проблем, связанных с другими методами создания BFC.

.container {
    display: flow-root;
}

2.3 Некоторые устаревшие варианты использования float

До появления новых макетов,floatЧасто используется для создания многоколоночных макетов. Мы установим ширину ряда элементов и будем перемещать их один за другим. Эффект сетки можно создать, установив некоторые точные процентные размеры для плавающих элементов.

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

2.4 Дополнительные показания поплавков и клиринговых поплавков

3. Позиционирование

Чтобы удалить элемент из обычного потока или изменить его положение в нормальном потоке документов, используйте CSSpositionАтрибуты. В обычном потоке документов элементpositionсобственностьstatic. Элементы располагаются друг за другом в блочном измерении, и по мере прокрутки страницы элементы также прокручиваются.

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

3.1. Относительное расположение

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

.item {
    position: relative;
    bottom: 50px;
}

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

<div class="container">
  
  <p>Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut jícama green bean celtuce. </p>
  
  <div class="item"></div>
  <p>Grape silver beet  collard greens avocado quandong fennel gumbo black-eyed pea watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach.</p>
</div>

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

p {
  margin: 0 0 1em 0;
}

.container {
  width: 500px;
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
}

.item {
  width: 100px;
  height: 100px;
  background-color: rgba(111,41,97,.3);
  position: relative;
  bottom: 50px;
}

example: Smashing Guide to Layout: position: relative on Codepen

3.2 Абсолютное позиционирование

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

Поэтому, когда вы устанавливаете для элементаposition: absolute, первое изменение заключается в том, что элемент располагается в верхнем левом углу области просмотра. Вы можете установитьtop,left,bottomа такжеrightСмещение, чтобы переместить элемент в нужное положение.

.item {
    position: absolute;
    top: 20px;
    right: 20px;
}

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

Из-за установки элементаposition: relativeне удаляет его из обычного потока, поэтому обычно это хороший выбор. Установите элемент контейнера, который вы хотите относительноposition : relative, Вы можете сделать абсолютное позиционирование элемента относительно его смещения.

<div class="container">
  
  <p>Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut jícama green bean celtuce. </p>
  
  <div class="item"></div>
  <p>Grape silver beet  collard greens avocado quandong fennel gumbo black-eyed pea watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach.</p>
</div>

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

p {
  margin: 0 0 1em 0;
}

.container {
  width: 500px;
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  position: relative;
}

.item {
  width: 100px;
  height: 100px;
  background-color: rgba(111,41,97,.3);
  position: absolute;
  top: 20px;
  left: 20px;
}

example: Smashing Guide to Layout: position: absolute on Codepen

3.3. Фиксированное позиционирование

в большинстве случаев,position: fixedЭлемент позиционируется относительно области просмотра и удаляется из обычного потока документов без сохранения занимаемого им пространства. Когда страница прокручивается, фиксированные элементы остаются на своем месте относительно области просмотра, в то время как остальное обычное содержимое прокручивается как обычно.

.item {
    position: fixed;
    top: 20px;
    left: 100px;
}

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

<div class="container">
  
  <p>Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut jícama green bean celtuce. </p>
  
  <div class="item"></div>
  <p>Grape silver beet  collard greens avocado quandong fennel gumbo black-eyed pea watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach.</p>
  
   <p>Grape silver beet  collard greens avocado quandong fennel gumbo black-eyed pea watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach.</p>
  
   <p>Grape silver beet  collard greens avocado quandong fennel gumbo black-eyed pea watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach.</p>
</div>

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

p {
  margin: 0 0 1em 0;
}

.container {
  width: 500px;
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  position: relative;
}

.item {
  width: 100px;
  height: 100px;
  background-color: rgba(111,41,97,.3);
  position: fixed;
  top: 20px;
  left: 20px;
}

example: Smashing Guide to Layout: position: fixed on Codepen

Для того, чтобы элемент с фиксированным положением не располагался относительно окна просмотра, необходимо установить элемент-контейнерtransform,perspective,filterОдно из трех свойств (не значение по умолчанию). Затем фиксированный элемент смещается относительно элемента уровня блока, а не окна просмотра.

3.4. липкое позиционирование

настраиватьposition: stickyЗаставляет элемент прокручиваться, как если бы он был в обычном потоке, но когда он прокручивается до определенной позиции относительно области просмотра, он будет зафиксирован на экране, как если бы он был зафиксирован. Это значение свойства является более новым свойством CSS, которое менее совместимо с браузером, но игнорируется в несовместимых браузерах и возвращается к обычной прокрутке.

.item {
    position: sticky;
    top: 0;
}

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

<div class="container">
  
  <p>Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut jícama green bean celtuce. </p>
  
  <div class="item"></div>
  <p>Grape silver beet  collard greens avocado quandong fennel gumbo black-eyed pea watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach.</p>
  
   <p>Grape silver beet  collard greens avocado quandong fennel gumbo black-eyed pea watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach.</p>
  
   <p>Grape silver beet  collard greens avocado quandong fennel gumbo black-eyed pea watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach.</p>
</div>

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

p {
  margin: 0 0 1em 0;
}

.container {
  width: 500px;
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  position: relative;
}

.item {
  width: 100px;
  height: 30px;
  background-color: rgba(111,41,97,.3);
  position: sticky;
  top: 0;
  width: 100%;
}

example: Smashing Guide to Layout: position: sticky on Codepen

3.5 Дополнительные материалы по позиционированию

  • "Positioning», Область обучения MDN, веб-документы MDN, Mozilla
  • "position: sticky;», Крис Койер, CSS-Tricks
  • "CSS position:sticky», Информация о поддержке браузером для фиксированного позиционирования, caniuse

4. Гибкая компоновка (Flex Layout)

Макет Flexbox — это метод макета, разработанный для одномерного макета. Одномерный означает, что вы хотите, чтобы содержимое располагалось в строках или столбцах. вы можете использоватьdisplay: flexчтобы превратить элемент в гибкий макет.

.container {
    display: flex;
}

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

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

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {
  width: 500px;
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  display: flex;
}

.item {
  width: 100px;
  height: 100px;
  padding: 10px;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}

example: Smashing Guide to Layout: flex on Codepen

4.1 Оси флексбокса

В приведенном выше примере мы бы сказали, что flex-элементы выровнены по линии от начальной позиции, а не по левому краю. Элементы располагаются рядами, потому что по умолчаниюflex-directionзначениеrow,rowПредставляет направление текста. Так как среда, в которой мы работаем, английская (как и китайская), язык с написанием слева направо, где строки начинаются слева, наши flex-элементы также начинаются слева. следовательноflex-directionЗначение определяется как главная ось flexbox.

Поперечная ось представляет собой ось, перпендикулярную главной оси. если вашflex-directionдаrowИ эластичные элементы располагаются в соответствии с линейным направлением, тогда поперечная ось является направлением расположения элементов блочного уровня. еслиflex-directionдаcolumnЗатем flex-элементы будут располагаться в направлении блочных элементов, и тогда поперечная ось станетrow.

Если вы привыкли работать с флексбоксами с точки зрения главной и поперечной осей, все становится очень просто.

4.2 Ориентация и последовательность

Модель flexbox позволяет намflex-directionнастройки свойствrow-reverseилиcolumn-reverseзначение, чтобы изменить ориентацию гибкого элемента на главной оси.

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

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {
  width: 500px;
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  display: flex;
  flex-direction: row-reverse;
}

.item {
  width: 100px;
  height: 100px;
  padding: 10px;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}

example: Smashing Guide to Layout: flex-direction on Codepen

Конечно, вы также можетеorderсвойство для изменения порядка flex-элемента. Однако будьте осторожны, это может вызвать некоторые проблемы у пользователей, получающих доступ к вашему сайту с помощью клавиатуры (а не мыши или сенсорного экрана), потому что порядок вкладок — это порядок, в котором элементы на странице появляются в исходном коде, а не порядке, в котором они отображаются. Вы можете прочитать больше об этом в разделе «Отображение и порядок документов» ниже.

4.3 Некоторые свойства Flex

Эти гибкие свойства используются для управления размером гибкого элемента на главной оси. Три свойства:

  • flex-grow
  • flex-shrink
  • flex-basis

Часто можно использовать их сокращенную форму:flex. Первое значение представляетflex-grow, второйflex-shrink, а третьяflex-basis.

.item {
    flex: 1 1 200px;
}

flex-basisУстанавливается начальный размер гибкого элемента, когда он не растягивается и не сжимается. В приведенном выше примере размер составляет 200 пикселей, поэтому мы дадим каждому элементу 200 пикселей пространства. Но в большинстве случаев размер элемента контейнера не будет точно разделен на множество элементов размером 200 пикселей, но может быть некоторая нехватка или оставшееся пространство.flex-growа такжеflow-shrinkСвойства позволяют нам контролировать размер отдельных гибких элементов, когда размер контейнера недостаточен или доступен.

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

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

flex-growа такжеflex-shrinkЗначение может быть любым положительным числом. большийflex-growГибкий элемент со значением растягивается на больший процент, когда в контейнере остается место; в то время как элемент с большим значениемflex-shrinkЦенные элементы будут сжаты сильнее, когда в контейнере закончится место.

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

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {
  width: 500px;
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  display: flex;
}

.item {
  flex: 1 1 0;
  width: 100px;
  height: 100px;
  padding: 10px;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}

.container :first-child {
  flex: 2 1 0; 
}

example: Smashing Guide to Layout: flex properties on Codepen

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

4.4 Дополнительная литература по макетам flexbox

5. Макет сетки

Макет сетки CSS (сетка) — это метод, используемый для двухмерного макета. Двумерный означает, что вы хотите расположить свой контент в строках и столбцах. Как и в случае с flexbox, в сетке также необходимо установитьdisplayстоимость. Вы можете установить для элементов контейнераdisplay: gridи использоватьgrid-template-columnsа такжеgrid-template-rowsсвойства для управления строками и столбцами в сетке.

.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;
    grid-template-rows: 200px 200px;
}

Приведенный выше CSS создаст сетку с элементами строки и столбца фиксированного размера. Но это может быть не то, что вы хотите. По умолчаниюauto, вы можете думать об этом как о «сделать сетку как можно больше». Если вы не укажете размер каждой строки (дорожка строки), размер содержимого всех добавляемых строк будет установлен равнымauto. Обычный шаблон заключается в том, чтобы задать ширину столбцов сетки, но позволить сетке добавлять строки по мере необходимости.

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

Сетка рассчитает и выделит место за вас, вам не нужно рассчитывать процент элементов, чтобы соответствовать размеру контейнера. В приведенном ниже примере мы используемfrдля создания столбцов сетки, что делает столбцы сетки адаптируемыми. Также мы использовалиgrid-gapДля обеспечения расстояния между элементами (расстояние между элементами в сетке будет подробно описано в разделе «Выравнивание»).

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5<br>has more content.</div>
</div>

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {
  width: 500px;
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
}

.container > div {
  padding: 10px;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}

example: Smashing Guide to Layout: a simple grid on Codepen

5.1 Некоторые термины о сетках

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

один настроен наdisplay: gridЭлементы называются контейнерами сетки. В контейнере сетки будут линии сетки в контейнере сетки, линии сетки - это то, что вы указываетеgrid-template-columnsа такжеgrid-template-rowsгенерируются строками и столбцами в сетке. Наименьшая единица в сетке (то есть площадь, образованная пересечением четырех линий сетки) называется ячейкой сетки, а далее областью сетки называется прямоугольная область, состоящая из нескольких ячеек.

Grid Lines run between each track of the grid.

Grid Tracks are between any two lines

Grid cells are the smallest unit on the grid, a Grid Area is one or more cells together making a rectangular area

5.2 Правила автоматического построения сетки

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

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

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {
  width: 500px;
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
}

.container > div {
  padding: 10px;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}

.container > div:nth-child(3n+1) {
  grid-row-end: span 2;
  background-color: rgba(193,225,237,.3);
  border: 2px solid rgba(193,225,237,.5);
}

example: Smashing Guide to Layout: auto-placement on Codepen

5.3. Базовый метод позиционирования на основе строки/столбца

Самый простой способ найти сетку — использовать методы позиционирования на основе строки/столбца (линии), просто сообщите браузеру, какая строка из какой строки объединена. Например, если вам нужна область сетки 2 * 2, вы можете начать указанный элемент с первой строки до третьей строки, начать с первого столбца до третьего столбца, чтобы вы могли переопределить четыре ячейки.

.item {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
}

Эти свойства могут быть представлены сокращениями:grid-columnа такжеgrid-row, где первое значение представляет собой начальное значение, а второе значение представляет конечное значение.

.item {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

Вы также можете разместить элементы сетки в одной и той же ячейке. Поддержите некоторые дизайны, которые пересекаются между контентом. Элементы сетки будут располагаться стопкой, как элементы на обычных веб-страницах, а элементы сетки ниже в исходном коде html будут располагаться поверх других элементов. вы все еще можете использоватьz-indexконтролировать порядок его укладки.

<div class="container">
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
  <div class="four">4</div>
  <div class="five">5</div>

</div>

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {
  width: 500px;
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
}

.container > div {
  padding: 10px;
}

.one {
  grid-column: 1 / 4;
  grid-row: 1;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}

.two {
  grid-column: 1 / 3;
  grid-row: 2;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}

.three {
  grid-column: 2 / 4;
  grid-row: 2 / 5;
  background-color: rgba(193,225,237,.3);
  border: 2px solid rgba(193,225,237,.5);
}

.four {
  grid-column: 1;
  grid-row: 4 ;
  background-color: rgba(193,225,237,.3);
  border: 2px solid rgba(193,225,237,.5);
}

.five {
  grid-column: 3 ;
  grid-row: 4 / 5;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}

example: Smashing Guide to Layout: line-based placement on Codepen

5.4 Поиск элементов по именованным областям

Вы можете найти элементы в сетке по именованным областям. Таким образом, вам нужно дать каждому элементу имя, а затем передатьgrid-template-areasЗначение свойства для описания макета.

.item1 {
    grid-area: a;
}

.item2 {
    grid-area: b;
}

.item3 {
    grid-area: c;
}

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas: 
     "a a b b"
     "a a c c";
}

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

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas: 
     "a a b b"
     "a a c .";
}

Вы также можете увидеть фактический эффект макета в коде демо ниже.

<div class="container">
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
  <div class="four">4</div>
  <div class="five">5</div>

</div>

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {
  width: 500px;
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: minmax(50px, auto);
  grid-gap: 20px;
  grid-template-areas: 
    "a a a"
    "b c c"
    ". . d"
    "e e d"
}

.container > div {
  padding: 10px;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}

.one {
  grid-area: a;
}

.two {
  grid-area: b;
}

.three {
  grid-area: c;
}

.four {
  grid-area: d;
}

.five {
  grid-area: e;
}

example: Smashing Guide to Layout: grid-template-areas on Codepen

5.5 Дополнительное чтение по сетке

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

Я (автор) также написал несколько статей в Smashing Magazine, чтобы помочь вам глубже понять концепции различных сеток:

6. Визуальный и документальный порядок

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

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

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

6.1 Дополнительные сведения о порядке отображения и порядке документов

7. Генерация коробки

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

7.1. Не генерируйте блоки или содержимое (display: none)

Если вы хотите, чтобы элемент и все его содержимое (включая все дочерние элементы) не генерировались, вы можете использоватьdisplay: none. Таким образом, элемент не будет отображаться и не сохранит место, которое он должен был занимать.

.item {
    display: none;
}

7.2 Не генерировать элемент, а генерировать все его дочерние элементы (display: contents)

display: contentдаdisplayновое значение атрибута . применить к элементуdisplay: contentСвойство приведет к тому, что его собственное поле не будет генерироваться, но все дочерние элементы будут генерироваться как обычно. Какая от этого польза? Если подумать, это полезно, если вы хотите, чтобы непрямые дочерние элементы гибкого макета или макета сетки применяли эти макеты.

В приведенном ниже примере первый flex-элемент содержит два дочерних элемента, поскольку для него задано значениеdisplay: contents, его блок не создается, а два его дочерних элемента становятся гибкими элементами и располагаются как прямые дочерние элементы контейнера flex box.

<div class="container">
  <div class="item">
    <div class="subitem">A</div>
    <div class="subitem">B</div>
  </div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {
  width: 500px;
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  display: flex;
}

.item {
  flex: 1 1 200px;
  padding: 10px;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}

.subitem {
  padding: 10px;
  background-color: rgba(193,225,237,.3);
  border: 2px solid rgba(193,225,237,.5);
}

.container .item:first-child {
  display: contents;
}

example: Smashing Guide to Layout: display: contents on Codepen

7.3 Дополнительные материалы по генерации блоков

8. Выровнять

В прошлом часто существовали очень «хитрые» способы достижения выравнивания, а методы, которые можно было использовать, были очень ограничены. Все изменилось с появлением модуля выравнивания блоков CSS. Вы будете использовать это для управления выравниванием контейнера сетки с контейнером flexbox. Различные другие методы компоновки в будущем будут применять эти свойства выравнивания. Набор подробных свойств в спецификации выравнивания коробки выглядит следующим образом:

  • justify-content
  • align-content
  • place-content
  • justify-items
  • align-items
  • place-items
  • justify-self
  • align-self
  • place-self
  • row-gap
  • column-gap
  • gap

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

align-itemsа такжеjustify-itemsсвойства относительноalign-selfа такжеjustify-selfОбъемная форма атрибутов. Эти свойства управляют выравниванием элемента в пределах его области сетки.

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div class="special">5</div>
</div>

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {
  width: 500px;
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 20px;
  align-items: center;
  justify-items: start;
}

.special {
  grid-column: 2 / 4;
  align-self: end;
  justify-self: end;
}

.container > div {
  padding: 10px;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}

example: Smashing Guide to Layout: Grid align-items, justify-items, align-self, justify-self on Codepen

align-contentа такжеjustify-contentСвойство выровняет строку/столбец в сетке (меш-контейнер должен иметь лишнее пространство после организации бизнеса).

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {
  width: 500px;
  height: 300px;
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 20px;
  align-content: space-between;
  justify-content: end;
}

.container > div {
  padding: 10px;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}

example: Smashing Guide to Layout: Grid align-content, justify-content on Codepen

Во флексбоксе,align-itemsа такжеalign-selfиспользуется для решения проблем выравнивания по поперечной оси, в то время какjustify-contentОн используется для решения распределения пространства на главной оси.

<div class="container">
  <div>1</div>
  <div>2</div>
  <div class="special">3</div>
  <div>4</div>
</div>

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {
  width: 500px;
  height: 300px;
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.special {
  align-self: stretch;
}

.container > div {
  padding: 10px;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}

example: Smashing Guide to Layout: Flex justify-content, align-items, align-self on Codepen

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

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

p {
  margin: 0 0 1em 0;
}

.container {
  width: 500px;
  height: 300px;
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

.container > div {
  flex: 1 1 200px;
  padding: 10px;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}

example: Smashing Guide to Layout: Flex align-content on Codepen

Некоторые из приведенных ниже ссылок более подробно обсуждают выравнивание блоков в различных методах компоновки. Стоит потратить время на то, чтобы понять, как работает выравнивание, это будет очень полезно для понимания flexbox, макета сетки и некоторых методов макета в будущем.

8.1 Расстояние между строками и столбцами

Многоколоночный макет имеетcolumn-gapсвойство, пока макет сетки имеетgrid-column-gao,grid-row-gapа такжеgrid-grid. Теперь они удалены из стандарта сетки и добавлены к выравниванию блоков. в то же время,grid-Свойство префикса переименовано вcolumn-gap,row-gapа такжеgap. Браузеры заменят свойства с префиксом новыми переименованными свойствами, поэтому не беспокойтесь, если вы используете старые имена, более совместимые с вашим текущим кодом.

Переименование означает, что эти свойства можно применять и к другим методам компоновки, очевидной альтернативой является flexbox. Хотя в настоящее время ни один браузер не поддерживает свойство gap в блочной модели, в будущем мы сможем использоватьcolumn-gapа такжеrow-gapдля создания интервала между элементами гибкого элемента.

8.2. Дополнительные материалы по генерации боксов

9. Многоколоночный макет (многоколоночный макет)

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

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

9.1 Установка ширины столбца

Чтобы установить минимальную ширину столбца и указать браузеру отображать как можно больше столбцов при этой ширине, используйте следующий CSS:

.container {
    column-width: 300px;
}

Это создаст как можно больше столбцов по 300 пикселей, а оставшееся пространство будет общим для всех столбцов. Таким образом, если пространство не разделено на 300 пикселей без остатка, ваш столбец будет чуть больше 300 пикселей.

9.2 Установка количества столбцов

Вместо установки ширины вы можете использоватьcolumn-countустановить количество столбцов. В этом случае браузер будет равномерно делить пространство между нужным вам количеством колонок.

.container {
    column-count: 3;
}

Если вы также добавитеcolumn-widthа такжеcolumn-count,Такcolumn-countСвойство действует как максимальный предел. В приведенном ниже коде столбцы будут добавляться до тех пор, пока не будут достигнуты три столбца, после чего любое дополнительное пространство будет разделено между тремя столбцами, даже если для дополнительного нового столбца достаточно места.

.container {
    column-width: 300px;
    column-count: 3;
}

9.3. Правила интервалов и столбцов

Вы не можете добавить поля и отступы в поле одного столбца, вам нужно использоватьcolumn-gapсвойство для установки интервала. Если вы не укажетеcolumn-gapзначение, по умолчанию будет 1em, чтобы предотвратить конфликт между столбцами. Этот и другие способы раскладкиcolumn-gapПоведение отличается, по умолчанию оно равно 0 в других макетах. Вы можете использовать любую единицу длины для интервала, включая 0 (если вам не нужен интервал между столбцами).

column-ruleСвойства дают вам возможность добавлять правила между двумя столбцами. этоcolumn-rule-width,column-rule-colorа такжеcolumn-rule-styleСокращение для , которое может вести себя аналогично границам. Обратите внимание, что само правило не занимает места. Он будет занимать верхнюю часть интервала, увеличивая или уменьшая те, которые вы установили.column-gapпространство между правилами и содержанием.

<div class="container">
  <p>Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut jícama green bean celtuce. </p>
  <p>Grape silver beet  collard greens avocado quandong fennel gumbo black-eyed pea watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach.</p>
</div>

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {
  width: 500px;
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  column-width: 120px;
  column-gap: 20px;
  column-rule: 4px dotted #000;
}

example: Smashing Guide to Layout: multicol on Codepen

9.4 Разрешение элементам занимать несколько столбцов

вы можете использоватьcolumn-spanАтрибуты заставляют элементы в контейнере с несколькими столбцами охватывать несколько столбцов, подобно баннеру.

h3 {
    column-span: all;
}

когдаcolumn-spanПодстолбец контейнера с несколькими столбцами, если он присутствует, остановится на элементе, поэтому содержимое контейнера будет формировать стиль с несколькими столбцами над элементом, а затем сформирует новый набор блоков столбцов под связующим элементом (столбец). коробка).

<div class="container">
  <p>Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut jícama green bean celtuce. </p>
  <h2>Veggies!</h2>
  <p>Grape silver beet  collard greens avocado quandong fennel gumbo black-eyed pea watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. </p>
</div>

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {
  width: 500px;
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  column-width: 120px;
  column-gap: 20px;
  column-rule: 4px dotted #000;
}

.container h2 {
  column-span: all;
  background-color: rgba(193,225,237,.6);
  border:2px solid rgba(193,225,237,.6);
  margin: 1em 0;
  padding: .5em;
}

example: Smashing Guide to Layout: multicol span on Codepen

вы можете использовать толькоcolumn-span: allилиcolumn-span: none, и не может сделать так, чтобы элемент занимал несколько столбцов (не столбцов). На момент написания Firefox еще не поддерживалcolumn-spanАтрибуты.

9.5. Дополнительное чтение на многополонских макетах

10. Фрагментация

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

Например, если у вас есть набор карточек в нескольких столбцах, и вы хотите убедиться, что карточки не разрезаются пополам в разных столбцах, вы можете использоватьbreak-insideатрибутavoidстоимость. Из соображений совместимости браузера вы также можете использовать устаревшиеpage-break-insideАтрибуты.

.card {
    page-break-inside: avoid;
    break-inside: avoid;
}

Если вы хотите подавить разрывы строк после элемента заголовка, вы можете использоватьbreak-afterАтрибуты.

.container h2 {
    page-break-after: avoid;
    break-after: avoid;
}

Эти свойства можно использовать в стилях печати или стилях с несколькими столбцами. В приведенном ниже примере три абзаца в контейнере с несколькими столбцами разделены на три столбца. яpэлемент установленbreak-inside: avoid, что означает, что каждый мультистолбец заканчивается в своем собственном столбце (даже если это делает столбцы разной длины).

<div class="container">
  <p>Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut jícama green bean celtuce. </p>
  <p>Grape silver beet  collard greens avocado quandong fennel gumbo black-eyed pea watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout</p>
  
  <p>Groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach.</p>
</div>

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {
  width: 500px;
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  column-width: 120px;
  column-gap: 20px;
  column-rule: 4px dotted #000;
}

.container p {
  page-break-inside: avoid;
  break-inside: avoid;
}

example: Smashing Guide to Layout: multicol fragmentation on Codepen

10.1 Дополнительные сведения о фрагментации

11. Как выбрать тип макета?

На большинстве веб-страниц используется сочетание типов макетов. Каждая спецификация макета точно определяет, как они взаимодействуют друг с другом. Например, вы можете использовать гибкий макет в элементах сетки в макете сетки. Некоторые гибкие контейнеры могут иметь свойства position или float. Эти спецификации уже содержат набор моделей компоновки в соответствии с оптимальной компоновкой. В этом руководстве я попытался описать основные принципы использования этого типа макета, чтобы помочь вам понять наилучший способ достижения эффекта.

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

оригинал:Getting Started With CSS Layout, спасибо автору Рэйчел Эндрю.

Категории