12
Авг
2019

Flexbox и отступы: примеры работы

Flexbox и отступы: примеры работы

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

Сценарий

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

Flexbox и отступы: примеры работы

Это связано с тем, что доступное пространство, выделяемое для Flex-элементов браузером при таких обстоятельствах: ширина блока, содержащего Flex-контейнер, минус его поля, границы и отступы в горизонтальном направлении. Это описано разделе спецификации CSS Flexible Box Layout Module. Уровень 1: 9.2 Размер линии.

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

<div class="flex">
  <div class="flex__item card">
    <img src="http://placekitten.com/150/150">
    <div class="card__txt">
      <h3>Sleep more</h3>
    </div>
  </div>
  <div class="flex__item card">
    <img src="http://placekitten.com/150/150">
    <div class="card__txt">
      <h3>Sleep more</h3>
    </div>
  </div>
  <!–– repeat for like 10 more cards ––>
</div>

Использование обводки

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

.border {
  border: 1em #4abc41 solid;
}

Потенциальным недостатком этого решения является положение полосы прокрутки. В зависимости от операционной системы это может стать или может не стать проблемой. Например, в Windows (скриншот показан ниже) это довольно очевидно. На Android полоса прокрутки едва заметна.

Flexbox и отступы: примеры работы

Я хотел бы воспользоваться этой возможностью, чтобы поговорить о спецификации CSS Scrollbars Module Level 1, которая в настоящее время является черновиком. Она вводит 2 новых свойства CSS для стиля полосы прокрутки scrollbar-color и scrollbar-width. Firefox поддерживает их с версии 64.

Flexbox и отступы: примеры работы

Использование псевдо-элемента ::after

Другим вариантом является использование в Flex-контейнере псевдо-элемента ::after. ::before и ::after — это генерированный контент, и вставляются только в связанный элемент. Другими словами, он будет отображаться как дочерний элемент внутри flex-контейнера.

.pseudo-elem {
  padding: 1em;
  
  &::after {
    content: '';
    padding: 0.5em;
  }
}

Вы должны убедиться, что отступ для псевдо-элемента ::after составляет половину от отступа, используемого в контейнере, потому что отступ применяется ко всему псевдо-элементу. Но если вы введете padding-left или padding-right, то можете использовать то же значение, что и для отступа во flex-контейнере.

Flexbox и отступы: примеры работы

Завершение

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

Автор: Chen Hui Jing

Источник: https://www.chenhuijing.com

Редакция: Команда webformyself.

Share

Тебе может это понравится...

Добавить комментарий