В продолжение использования 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.
и чем это отличается от атрибута style=»…» ?
В смысле? Если уж искать похожесть, то это скорее атрибуты в таблице. А так в
style
нельзя же использовать переключение по свойствам. Например,layout="row"
илиlayout="column"
.