Блог Краснодарского Программиста

О чём этот сайт: на сайте я собираю рабочие рецепты и способы решения возникающих задач, записываю выжимки из учебных материалов, чтобы потом к ним возвращаться и пользоваться в рабочем процессе. Пользуйтесь и вы. Удачи!

EMMET Flexbox

df

display: -webkit-flex;
display: -ms-flex;
display: flex;

fdr

-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;

fdc

-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;

А, так же fdrr и fdcr

fxw:w

-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;

fxw:n

-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;

Для justify-content:

jcfs = justify-content: flex-start;
jcfe = justify-content: flex-end;
jcc = justify-content: center;
jcsb = justify-content: space-between;
jcsa = justify-content: space-around;

Для align-items:

aic = align-items: center;
aifs = align-items: flex-start;
aife = align-items: flex-end;
aib = align-items: baseline;

Для align-content:

acs = align-content: stretch;
acfs = align-content: flex-start;
acc = align-content: center;
acfe = align-content: flex-end;
acsb = align-content: space-between;
acsa = align-content: space-around;

Для остального:

ord = order
fxg = flex-grow
fxs = flex-shrink
fxb = flex-basis
als = align-self