Модель отображения. Часть 3

Мохов Олег
Разработчик интерфейсов

Гибкие коробки

Гибкие коробки

Разметка

Прошлое

<table>

Семантика

В чём же тут проблема?

33% 33% 33%
33% 33%
33%, float: left
33%, float: left
33%, display: inline-block
33%, display: inline-block

Основные проблемы раскладок

  • float'ы и хаки типа clearfix
  • Абсолютное позиционирование решает проблемы смежных элементов, но создаёт проблемы их связности. Не говоря уже о том что элементы выводятся из потока
  • Куча лишней разметки при использовании display: table или таблиц
  • Пробелы при использовании inline-block'ов

flexbox

Flexbox

Flexbox позволяет контролировать размер, порядок и выравнивание элементов по нескольким осям, распределение свободного места между элементами и многое другое.

CSS Flexible Box Layout Module

"Первая система для раскладки, которая не хак"
Вадим Макеев

Основные преимущества Flexbox

  1. Элементы могут сжиматься и растягиваться по заданным правилам, занимая нужное пространство.
  2. Выравнивание по вертикали и горизонтали.
  3. Расположение элементов в html не имеет решающего значения
  4. Элементы могут автоматически выстраиваться в несколько строк/столбцов, занимая все предоставленное место.
  5. Локализация для языков с другим написанием
  6. Просто и понятно.
caniuse.com/#feat=flexbox

display: flex

+1 к оценке –


9.5 балла


допуск до экзамена –


5 баллов
+1 к оценке –
9.5 балла
допуск до экзамена –
5 баллов
.wrapper {
    display: flex;
}
+1 к оценке –
9.5 балла
допуск до экзамена –
5 баллов
.wrapper {
    display: flex;
}
+1 к оценке –
9.5 балла
допуск до экзамена –
5 баллов
4 балл
.wrapper {
    display: flex;
}
+1 к оценке –
9.5 балла
допуск до экзамена –
5 баллов
4 балл

 

flex-direction: row

flex-direction: row-reverse

flex-direction: column

flex-direction: column-reverse

flex-direction: row

+1 к оценке –
9.5 балла
допуск до экзамена –
5 баллов
4 балл

flex-direction: row-reverse

+1 к оценке –
9.5 балла
допуск до экзамена –
5 баллов
4 балл

flex-direction: column

+1 к оценке –
9.5 балла
допуск до экзамена –
5 баллов
4 балл

flex-direction: column-reverse

+1 к оценке –
9.5 балла
допуск до экзамена –
5 баллов
4 балл

justify-content

задаёт выравнивание вдоль главной оси
значение по-умолчанию flex-start
не сдал
3
5
8
10

justify-content: flex-end

не сдал
3
5
8
10

justify-content: center

не сдал
3
5
8
10

justify-content: space-between

не сдал
3
5
8
10

justify-content: space-around

не сдал
3
5
8
10

align-items

задаёт выравнивание вдоль поперечной оси
значение по-умолчанию stretch — блоки растянуты, занимая все доступное место по поперечной оси, при этом все же учитываются
не
сдал
3
5
8
10

align-items: flex-start

не
сдал
3
5
8
10

align-items: flex-end

не
сдал
3
5
8
10

align-items: center

не
сдал
3
5
8
10

align-items: baseline

не
сдал
3
5
8
10

align-items: baseline

не
сдал
3
5
8
10

Многострочность

Многострочность

не
сдал
3
5
8
10

Многострочность

не
сдал
3
5
8
10
10
10
10
10
10
10
10
10
10
10

flex-wrap

задаёт режим форсирования выстраивания блоков в одну линию
значение по-умолчанию nowrap — блоки расположены в одну линию слева направо (в rtl справа налево)
не
сдал
3
5
8
10
10
10
10
10
10
10
10
10
10
10

flex-wrap: wrap

не
сдал
3
5
8
10
10
10
10
10
10
10
10
10
10
10

flex-wrap: wrap-reverse

не
сдал
3
5
8
10
10
10
10
10
10
10
10
10
10
10

flex-flow

комбинация flex-direction + flex-wrap

align-content

определяет то, каким образом образовавшиеся ряды блоков будут выровнены по вертикали и как они поделят между собой все пространство flex-контейнера.
значение по-умолчанию stretch — ряды блоков растянуты, дабы занять все имеющееся пространство
работает только при flex-wrap: wrap; flex-wrap: wrap-reverse

align-content: stretch

не
сдал
3
5
8
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10

align-content: flex-start

не
сдал
3
5
8
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10

align-content: flex-end

не
сдал
3
5
8
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10

align-content: center

не
сдал
3
5
8
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10

align-content: space-between

не
сдал
3
5
8
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10

align-content: space-around

не
сдал
3
5
8
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10

Правила для дочерних элементов flex-контейнера

align-self

Делает возможным переопределять свойство flex-контейнера align-items для отдельного flex-блока
не
сдал
3
5
8
10

align-self: flex-start

Делает возможным переопределять свойство flex-контейнера align-items для отдельного flex-блока
не
сдал
3
5
8
10

align-self: center

Делает возможным переопределять свойство flex-контейнера align-items для отдельного flex-блока
не
сдал
3
5
8
10

flex-basis

Задает изначальный размер по главной оси для flex-блока до того, как к нему будут применены преобразования, основанные на других flex-факторах.
не
сдал
3
5
8
10

flex-basis: 200px

Задает изначальный размер по главной оси для flex-блока до того, как к нему будут применены преобразования, основанные на других flex-факторах.
не
сдал
3
5
8
10

flex-basis: 600px

Задает изначальный размер по главной оси для flex-блока до того, как к нему будут применены преобразования, основанные на других flex-факторах.
не
сдал
3
5
8
10

flex-basis: 1000px

Задает изначальный размер по главной оси для flex-блока до того, как к нему будут применены преобразования, основанные на других flex-факторах.
не
сдал
3
5
8
10

Жадность и бедность

flex-grow/
flex-shrink

flex-grow

Определяет то на сколько отдельный блок может быть больше соседних
не
сдал
3
5
8
10

flex-grow: 2

Определяет то на сколько отдельный блок может быть больше соседних
не
сдал
3
5
8
10

flex-grow: 2

Определяет то на сколько отдельный блок может быть больше соседних
не
сдал
3
5
8
10

flex-grow: 4

Определяет то на сколько отдельный блок может быть больше соседних
не
сдал
3
5
8
10

flex-shrink

Определяет, насколько flex-блок будет уменьшаться относительно соседних элементов внутри flex-контейнера в случае недостатка свободного места. По умолчанию равен 1.
3 3 3 3 3 3 3 3 3 3 3 3 3 3 3
3 3 3 3 3 3 3 3 3 3 3 3 3 3 3
3 3 3 3 3 3 3 3 3 3 3 3 3 3 3

flex-shrink: 0

Определяет, насколько flex-блок будет уменьшаться относительно соседних элементов внутри flex-контейнера в случае недостатка свободного места. По умолчанию равен 1.
3 3 3 3 3 3 3 3 3 3 3 3 3 3 3
3 3 3 3 3 3 3 3 3 3 3 3 3 3 3
3 3 3 3 3 3 3 3 3 3 3 3 3 3 3

Порядок

order

порядок следования отдельно взятого flex-блока внутри flex-контейнера. По умолчанию равно 0.
1
2
3
4
5

order: 1

порядок следования отдельно взятого flex-блока внутри flex-контейнера. По умолчанию равно 0.
1
2
3
4
5

order: 1, 2, 3.. n

порядок следования отдельно взятого flex-блока внутри flex-контейнера. По умолчанию равно 0.
1
2
3
4
5

Все лгут

Недостатки flexbox

  1. Несвязанность вертикально расположенных элементов
  2. Порядок элементов требует предварительных договорённостей (z-index)

Модульная система вёрстки

Модульная система вёрстки

Система вёрстки, при которой основой композиции полос и разворотов становится модульная сетка с определенным шагом (модулем), одинаковым или разным по горизонтали и вертикали.

CSS Grid Layout

Определение

In grid layout, the content of a grid container is laid out by positioning and aligning it into a grid.

При grid разметке содержимое контейнера позиционируется и выравнивается относительно сетки.

Определение

The grid is an intersecting set of horizontal and vertical grid lines that divides the grid container’s space into grid areas, into which grid items (representing the grid container’s content) can be placed.

Сетка – это набор пересекающихся вертикальных и горизонтальных линий, которые делят контейнер на зоны, внутри которых располагаются элементы вёрстки.

Строки и столбцы

.layout {
    display: grid;

    grid-template-columns:
    100px 10px 100px 10px 100px;

    grid-template-rows:
    20px 10px 30px;
    }

.layout {
    display: grid;

    grid-template-columns:
    100px 1fr 100px 2fr 100px; /* fr - flex factor */

    grid-template-rows:
    auto 10px auto;
    }


    
a

    
b

    
c

    
d

    
e

    
f


.wrapper {
    display: grid;
    }

.a {
    grid-column-start: 1;
    grid-column-end: 2;

    grid-row-start: 1;
    grid-row-end: 2;
    }

.b {
    grid-column-start: 3;
    grid-column-end: 4;

    grid-row-start: 3;
    grid-row-end: 4;
    }

.b {
    grid-column-start: 3;
    grid-column-end: 6;

    grid-row-start: 3;
    grid-row-end: 4;
    }

.b {
    grid-column: 3 / 6;

    grid-row: 3 / 4;
    }

.b {
    grid-area: 3 / 3 / 4 / 6;
    }


    .b {
    grid-area: 3 / 3 / 4 / 6;
    }

    .wrapper {
    direction: rtl;
    }

Шаблоны

.layout {
    display: grid;

    grid-template-columns:
    100px 1fr 100px 2fr 100px;

    grid-template-rows:
    auto 10px auto;

    grid-template-areas: "h h h h h"
    "a b b b c"
    "d d d e e";
    }

.a {
    grid-area: h;
    }

.a {
    grid-area: a;
    }

Demo

Где использовать?

Когда стоит использовать grid?

  • Когда есть сетка (не колонки, а именно сетка)
  • Когда сетка может изменяться под действием контента
  • Когда в сетке есть блоки на несколько ячеек
  • В админках (уже сейчас!)

Ссылки

ДЗ

https://github.com/urfu-2016/markup-task-7

Deadline
19 ноября
02:59:59.999