.example {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-transition: all .5s;
-o-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
background: -webkit-linear-gradient(top, white, black);
background: -moz-linear-gradient(top, white, black);
background: -o-linear-gradient(top, white, black);
background: linear-gradient(to bottom, white, black);
}
.example {
display: flex;
transition: all .5s;
user-select: none;
background: linear-gradient(to bottom, white, black);
}
Это уже почти 98%
Задаёт главную ось и направление элементов в контейнере.
Определяет, будет ли контейнер однострочным или многострочным.
Определяет выравнивание относительно основной оси путём распределения свободного места.
Определяет выравнивание по поперечной оси.
Определяет выравнивание строк многострочного flexbox по поперечной оси.
Работает так же, как justify-content.
.red {order: -1}
.green {order: 1}
Задаёт размер элемента по умолчанию.
Позволяет переопределить выравнивание, заданное в align-items для отдельного элемента.
<div class="outer">
<div class="inner">Some Content</div>
</div>
.outer {
display: flex;
justify-content: center;
align-items: center;
}
.outer {
display: flex;
}
.inner {
margin: auto;
}
<div class="wrapper">
<div class="content"></div>
<div class="footer"></div>
</div>
.wrapper {
display: flex;
flex-direction: column;
}
.content {
flex-grow: 1;
}
column-count: 3;
column-width: 200px;
/* Короткая запись: */
columns: 3 200px;
/* Интервал: */
column-gap: 2em;
/* Разделитель: */
column-rule: 1px solid #aaa;
Здесь должна была быть «Производительность», но она не влезла в слайд.
.outer>.inner*4
.outer {
columns: 2 100px;
}
.inner {
height: 100px;
break-inside: avoid;
box-shadow: 3px 3px 10px 3px #000;
margin-bottom: 50px;
}
/* Было: */
rotateZ(37deg);
/* Стало: */
rotate3d(0, 0, 1, 37deg);
<div class="grid">
<div class="content"></div>
<div class="header"></div>
<div class="footer"></div>
<div class="sidebar"></div>
</div>
.grid { display: grid;
grid-template-columns: 60px 1fr;
grid-template-rows: 50px 1fr 60px; }
.header { grid-row: 1 / 2;
grid-column: span 2; }
.sidebar { grid-row: 2 / 3;
grid-column: 1 / 2; }
.footer { grid-area: -1 / 1 / -2 / span 2; }
.header { grid-area: h }
.sidebar { grid-area: s }
.content { grid-area: c }
.footer { grid-area: f }
.grid {
grid-template-columns: 60px 1fr;
grid-template-rows: 50px 1fr 60px;
grid-template-areas:
'h h'
's c'
'f f';
}
.grid {
grid-template: 50px 20px 1fr 60px / 1fr;
grid-template-areas:
'h h h h'
's s s s'
'c c c c'
'f f f f';
}