Используете ли вы Flexbox? Часть 2-я

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

$flex-properties: (
    justify-content: (flex-start flex-end center space-between space-around),
    align-items: (flex-start flex-end center baseline stretch),
    align-content: (flex-start flex-end center space-between space-around stretch)
);

Затем циклом перебираем все свойства:

@each $key, $properties in $flex-properties {
    @each $property in $properties {
        [#{$key}="#{$property}"] {
            #{$key}: #{$property};
        }
    }
}

И получаем на выходе вот такой CSS:

[justify-content="flex-start"] {
  justify-content: flex-start; }

[justify-content="flex-end"] {
  justify-content: flex-end; }

[justify-content="center"] {
  justify-content: center; }

[justify-content="space-between"] {
  justify-content: space-between; }

[justify-content="space-around"] {
  justify-content: space-around; }

[align-items="flex-start"] {
  align-items: flex-start; }

[align-items="flex-end"] {
  align-items: flex-end; }

[align-items="center"] {
  align-items: center; }

[align-items="baseline"] {
  align-items: baseline; }

[align-items="stretch"] {
  align-items: stretch; }

[align-content="flex-start"] {
  align-content: flex-start; }

[align-content="flex-end"] {
  align-content: flex-end; }

[align-content="center"] {
  align-content: center; }

[align-content="space-between"] {
  align-content: space-between; }

[align-content="space-around"] {
  align-content: space-around; }

[align-content="stretch"] {
  align-content: stretch; }

Теперь остаётся правильно этим всем распорядиться, например так:

<div mo-layout justify-content="center" align-items="center" align-content="center">
 <div>11111111</div>
 <div>2 <br /> 2</div>
 <div>3 <br /> 3 <br /> 3</div>
</div>

И не большой готовый пример:

See the Pen PzPpgd by Sergey Kirichenko (@oknechirik) on CodePen.

Используете ли вы Flexbox? Часть 2-я: 2 комментария

  1. и чем это отличается от атрибута style=»…» ?

  2. В смысле? Если уж искать похожесть, то это скорее атрибуты в таблице. А так в style нельзя же использовать переключение по свойствам. Например, layout="row" или layout="column".

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *