Раскладка

Макеты (layout)

Фиксированный макет

Ширина контента не меняется в зависимости от размеров окна браузера.

Резиновый макет

Подстраивание контента под ширину экрана путем сжатия элементов.

Особенности

  • На одной странице максимальное количество информации
  • Не заботится о том, как контент будет выглядеть на экранах с критически большой или маленькой шириной

Адаптивный макет

Сайт подстраивается под разрешение и размер экрана

Особенности

  • Адаптация под различные разрешения экранов
  • Не можем предугадать как будет выглядеть контент на всех устройствах

Отзывчивый макет

Особенности

  • Не «прыгает» по контрольным точкам
  • Тщательная проработка

Что под капотом?

Media queries

Правило @media - позволяет указать тип устройства, для которого будет применяться указанный стиль.

@media [not|only] mediatype [and (media feature)] {
    CSS-Code;
}

Минимум

@media {
    a {
        color: red;
    }
}

Media types
  • all – все устройства(по-умолчанию)
  • print – принтеры и режим "Print preview"
  • screen – все утройства не print и не speech
  • speech – скринридеры

Версия для печати

body {
  color: red
}
@media print {
  body {
    color: blue
  }
}

Для печати и экранов

@media print, screen {
  body {
    color: blue
  }
}

media features

– задают технические характеристики устройства, на котором отображается документ.

Ширина

@media (min-width:600px) {
    aside {
        float: left;
        width: 300px;
        margin: 10px;
    }
}
@media (max-width:600px) {
    aside {
        float: none;
        color: blue;
    }
}
Пример

Диапазон

h1 {
    font-size: 50px;
}

@media (min-width:400px) and (max-width:600px) {
    h1 {
        font-size: 20px;
        color: red;
    }
}
Пример

Диапазон

h1 {
    font-size: 50px;
}

@media (min-width:600px), (max-width:400px) {
    h1 {
        font-size: 20px;
        color: red;
    }
}
Пример

device width

@media (min-device-width: 200px) and
       (max-device-width: 400px) {
    body {
        color: red;
    }
}
Пример

Аттрибут media

<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
<link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">
<link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">

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

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

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

Разметка страницы

<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
caniuse.com/#feat=flexbox

display: flex

без практики –


8 баллов


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


3 балла
без практики –
8 баллов
допуск до экзамена –
3 балла
.wrapper {
    display: flex;
}
без практики –
8 баллов
допуск до экзамена –
3 балла
.wrapper {
    display: flex;
}
без практики –
8 баллов
допуск до экзамена –
3 балла
4 балла
.wrapper {
    display: flex;
}
без практики –
8 баллов
допуск до экзамена –
3 балла
4 балла

 

flex-direction: row

flex-direction: row-reverse

flex-direction: column

flex-direction: column-reverse

flex-direction: row

без практики –
8 баллов
допуск до экзамена –
3 балла
4 балла

flex-direction: row-reverse

без практики –
8 баллов
допуск до экзамена –
3 балла
4 балла

flex-direction: column

без практики –
8 баллов
допуск до экзамена –
3 балла
4 балла

flex-direction: column-reverse

без практики –
8 баллов
допуск до экзамена –
3 балла
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

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

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)

Grid

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

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

CSS Grid Layout

Определение

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

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

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

.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";
}

.layout {
    display: grid;

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

    grid-template-rows:
    auto 10px auto;

    grid-template-areas: "✈️ ✈️ ✈️ ✈️ ✈️"
                         "😂 🤡 🤡 🤡 🤣"
                         "😞 😞 😶 😡 😡";
}

.a {
    grid-area: ✈️;
}

.a {
    grid-area: 😂;
}

Demo

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

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

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

Ссылки

ДЗ

https://github.com/urfu-2017/markup-task-6