Модель отображения. Часть 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

зачёт автоматом –


8 баллов


допуск до зачёта –


5 баллов
зачёт автоматом –
8 баллов
допуск до зачёта –
5 баллов
.wrapper {
    display: flex;
}
зачёт автоматом –
8 баллов
допуск до зачёта –
5 баллов
.wrapper {
    display: flex;
}
зачёт автоматом –
8 баллов
допуск до зачёта –
5 баллов
3 балла
.wrapper {
    display: flex;
}
зачёт автоматом –
8 баллов
допуск до зачёта –
5 баллов
3 балла

 

flex-direction: row

flex-direction: row-reverse

flex-direction: column

flex-direction: column-reverse

flex-direction: row

зачёт автоматом –
8 баллов
допуск до зачёта –
5 баллов
3 балла

flex-direction: row-reverse

зачёт автоматом –
8 баллов
допуск до зачёта –
5 баллов
3 балла

flex-direction: column

зачёт автоматом –
8 баллов
допуск до зачёта –
5 баллов
3 балла

flex-direction: column-reverse

зачёт автоматом –
8 баллов
допуск до зачёта –
5 баллов
3 балла

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

Все лгут

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

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

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

CSS Grid Layout
http://caniuse.com/#feat=css-grid

    
a

    
b

    
c

    
d

    
e

    
f


.wrapper {
    display: grid;
}
 
.wrapper {
    display: grid;

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

    grid-template-rows:
        auto 10px auto;
}
 
.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;
}
http://gridbyexample.com/

Ссылки

ДЗ

https://github.com/urfu-2015/verstka-tasks-7

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