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

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

Вёрстка

Ширина разрешения экрана

320px — мобильные портретный вид;

480px — мобильные альбомный вид;

600px — маленькие планшеты;

768px — планшены портретный вид;

1024px — планшеты альбомный вид;

1280px — компьютеры, ноутбуки.

Как сделать современный вид блока с тенью

[css]

box-sizing: border-box;
border: none;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
background-color: #ffffff;

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