Лена Рашкован

Layout

1

взаимное расположение крупных блоковстраницы.

Layout (раскладка) –

2

3

4

5

6

7

8

<div class="column-1"> </div> <div class="column-2"> </div> <div class="column-3"> </div>

.column­1

.column­2

.column­3

.column­1 .column­2 .column­3

9

Таблицы

10

<table> <tbody> <tr> <td style="width: 33%;">колонка раз</td> <td style="width: 33%;">колонка два</td> <td style="width: 33%;">колонка три</td> </tr> </tbody> </table>

td td td

11

td tdtd

12

Раскладка на таблицах:

колонки выравниваются по высоте

адекватна при переполнении

куча лишней разметки

не семантично

13

Флоаты

14

float: le� float: le�float: le�

15

float: le� float: le�

clear: both

float: le�

16

Раскладка на флоатах:можно задавать размеры

переносятся

колонки не выравниваются по высоте

спецэффекты (схлопывание родителя) и хаки (clearfix)

перекрытие контента при переполнении

17

Инлайн-блоки

18

display:inline-block

display:inline-block

display:inline-block

19

Раскладка на инлайн-блоках:реагируют на выравнивание (text-align и vertical-align)

можно задавать размеры

переносятся

лишние пробелы

при переполнении всё может развалиться

колонки не выравниваются по высоте20

Чем раскладывать-то тогда?таблицы — для табличных данных

флоаты — для обтекания текстом

инлайн-блоки — лучше не надо :)

флексбоксы �

гриды �

21

Флексбокс

22

flex = гибкий

Гибкие раскладки: - управление распределением места

- мощные возможности для выравнивания

display: flex

23

флекс-контейнер (flex-container)

флекс-элемент (flex-item)

главная ось (main axis)

поперечная ось (cross axis)

24

Флекс-элементы располагаются вдоль

главной оси.

Свойство flex-direction меняет еёнаправление.

25

flex-direction: row

по умолчанию

целовались студенты распускались тюльпаны чик-чирикало там и тут

26

flex-direction: row-reverse

целовались студентыраспускались тюльпанычик-чирикало там и тут

27

flex-direction: column

целовались студенты

распускались тюльпаны

чик-чирикало там и тут

28

flex-direction: column-reverse

целовались студенты

распускались тюльпаны

чик-чирикало там и тут

29

Свойство justify-content управляетвыравниванием флекс-элементов вдоль

главной оси.

30

justify-content: flex-start по умолчанию

целовались студенты распускались тюльпаны чик-чирикало там и тут

31

justify-content: flex-end

целовались студенты распускались тюльпаны чик-чирикало там и тут

32

justify-content: center

целовались студенты распускались тюльпаны чик-чирикало там и тут

33

justify-content: space-between

целовались студенты распускались тюльпаны чик-чирикало там и тут

34

justify-content: space-around

целовались студенты распускались тюльпаны чик-чирикало там и тут

35

Поперечная ось всегда перпендикулярнаглавной оси.

Направление изменить нельзя.

36

37

Свойство align-items управляетвыравниванием флекс-элементов вдоль

поперечной оси.

38

align-items: stretch по умолчанию

целовались студенты распускались тюльпаны чик-чирикало там и тут

39

align-items: flex-start

целовались студенты распускались тюльпаны чик-чирикало там и тут

40

align-items: flex-end

целовались студенты распускались тюльпаны чик-чирикало там и тут

41

align-items: center

целовались студенты распускались тюльпаны чик-чирикало там и тут

42

align-items: baseline

целовались студенты распускались тюльпаны чик-чирикало там и тут

43

align-self даёт переопределить

выравнивание у флекс-элемента.

Значения те же, что и у align-items.

нам сказали стоять в началея не с вами, ребят

44

Что если флекс-элементов много?

целовались студенты распускались тюльпаны чик-чирикало там и тут

45

Будут сжиматься до предела.

целовалисьстуденты

распускалисьтюльпаны

чик-чирикалотам и тут

я забраладокументы

поругаласьс деканом

мам, ябросилаинститут

46

Выйдут за пределы контейнера,но продолжат располагаться в один ряд.

целовалисьстуденты

распускалисьтюльпаны

чик-чирикалотам и тут

я забраладокументы

поругаласьс деканом

мам, ябросилаинститут

эсс

47

Переносом элементов управляет свойствоflex-wrap, и по умолчанию перенос

запрещён.

48

flex-wrap: nowrap wrap

целовались студенты распускались тюльпаны чик-чирикало там и тут

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

это мне сказал сделать Слава, мой хороший друг чемодан, вокзал, поезд

Москва – Екатеринбург

49

flex-wrap: wrap-reverse

целовались студенты распускались тюльпаны чик-чирикало там и тут

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

это мне сказал сделать Слава, мой хороший друг чемодан, вокзал, поезд

Москва – Екатеринбург

50

Можно комбинировать направлениеи перенос в свойстве flex-flow:

.container { display: flex; flex-flow: row wrap; }

51

Cвойство align-content управляетраспределением рядов флекс-элементов

вдоль поперечной оси.

52

align-content: stretch по умолчанию

целовались студенты распускались тюльпаны чик-чирикало там и тут

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

это мне сказал сделать Слава, мой хороший друг чемодан, вокзал, поезд

Москва – Екатеринбург

53

align-content: flex-start

целовались студенты распускались тюльпаны чик-чирикало там и тут

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

это мне сказал сделать Слава, мой хороший друг чемодан, вокзал, поезд

Москва – Екатеринбург

54

align-content: flex-end

целовались студенты распускались тюльпаны чик-чирикало там и тут

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

это мне сказал сделать Слава, мой хороший друг чемодан, вокзал, поезд

Москва – Екатеринбург

55

align-content: center

целовались студенты распускались тюльпаны чик-чирикало там и тут

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

это мне сказал сделать Слава, мой хороший друг чемодан, вокзал, поезд

Москва – Екатеринбург

56

align-content: space-between

целовались студенты распускались тюльпаны чик-чирикало там и тут

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

это мне сказал сделать Слава, мой хороший друг чемодан, вокзал, поезд

Москва – Екатеринбург

57

align-content: space-around

целовались студенты распускались тюльпаны чик-чирикало там и тут

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

это мне сказал сделать Слава, мой хороший друг чемодан, вокзал, поезд

Москва – Екатеринбург

58

Если активно align-content, то что с align-items?

59

align-content: stretch; align-items: center

целовались студенты распускались тюльпаны чик-чирикало там и тут

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

это мне сказал сделать Слава, мой хороший друг чемодан, вокзал, поезд

Москва – Екатеринбург

60

С помощью свойства order можно менятьпорядок следования флекс-элементов.

61

order: 0 по умолчанию

раз

0

два

0

три

0

четыре

0

пять

0

62

order: 1

раз

0

два

0

три

1

четыре

0

пять

0

63

order: -1

раз

0

два

0

три

-1

четыре

0

пять

0

64

order

раз

1

два

2

три

3

четыре

4

пять

5

65

Как указать размер флекс-элемента?

Cвойство flex-basis задает размерна главной оси.

Если не указать, то базовый размервозьмётся из ширины или высоты.

66

flex-basis: 50%

50% по горизонтали auto

50% по вертикали

auto

67

Почему размер базовый?

Это исходный размер.

Свободное место можно распределятьв соответствии с коэффициентом

жадности флекс-элемента (flex-grow).

68

flex-grow: 0 по умолчанию

�

0

�

0

�

0

69

flex-grow: 1

�

0

�

1

�

0

70

flex-grow: 2

�

0

�

1

�

2

71

Как вычисляется итоговый размер?1. Посчитаем свободное место:

free space = width - ∑ flex-basis

2. Посчитаем долю свободного места: fraction = free space / ∑ flex-grow

3. Вычислим итоговый размер: final size = flex-basis + (fraction × flex-grow)

На размер свободного места ещё могутвлиять рамки и отступы :)

72

Особенности внешних отступов:не схлапываются

не выпадают

отступ с auto заберет все свободное местопо своему направлению

часть базового размера элемента

73

�

0

�

1

�

2

width = 980px

flex-basis = 2×10px + 2×10px + 25px = 65px

free space = 980px - 3 × 65px = 785px

fraction = 785px / (0 + 1 + 2) = ~262px

final size1 = 65px + (262px × 0) = 65px;

final size2 = 65px + (262px × 1) = ~326px;

final size3 = 65px + (262px × 2) = ~589px;74

Что если сумма базовых размеров больше,чем свободного места?

Будем делить отрицательноепространство в соответствии

с коэффициентами сжатия (flex-shrink).

75

flex-shrink: 1 по умолчанию

�?

1

�))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))

1

плак;(

1

76

flex-shrink: 0

� !

0

�))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))

1

плак;(

1

77

flex-shrink: 0

� !

0

�))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))

1

не плак :)

0

78

Хардкорный алгоритм расчёта

79

С помощью сокращённого свойства flexможно одновременно задать

флекс-элементу flex-grow, flex-shrink и flex-basis.

80

flex: [flex-grow] [flex-shrink] [flex-basis]

.elem { flex: initial; /* = 0 1 auto — все по умолчанию */ } 81

flex: [flex-grow] [flex-shrink] [flex-basis]

.elem { flex: initial; /* = 0 1 auto — все по умолчанию */ flex: auto; /* = 1 1 auto */ } 82

flex: [flex-grow] [flex-shrink] [flex-basis]

.elem { flex: initial; /* = 0 1 auto — все по умолчанию */ flex: auto; /* = 1 1 auto */ flex: none; /* = 0 0 auto */ } 83

flex: [flex-grow] [flex-shrink] [flex-basis]

.elem { flex: initial; /* = 0 1 auto — все по умолчанию */ flex: auto; /* = 1 1 auto */ flex: none; /* = 0 0 auto */ flex: 2; /* число -> flex-grow, = 2 1 auto */ } 84

flex: [flex-grow] [flex-shrink] [flex-basis]

.elem { flex: initial; /* = 0 1 auto — все по умолчанию */ flex: auto; /* = 1 1 auto */ flex: none; /* = 0 0 auto */ flex: 2; /* число -> flex-grow, = 2 1 auto */ flex: 50%; /* единица измерения длины -> flex-basis = 50%, = 0 1 50% */ } 85

flex: [flex-grow] [flex-shrink] [flex-basis]

.elem { flex: initial; /* = 0 1 auto — все по умолчанию */ flex: auto; /* = 1 1 auto */ flex: none; /* = 0 0 auto */ flex: 2; /* число -> flex-grow, = 2 1 auto */ flex: 50%; /* единица измерения длины -> flex-basis = 50%, = 0 1 50% */ flex: 2 50%; /* flex-grow & flex-basis, = 2 1 50% */ } 86

flex: [flex-grow] [flex-shrink] [flex-basis]

.elem { flex: initial; /* = 0 1 auto — все по умолчанию */ flex: auto; /* = 1 1 auto */ flex: none; /* = 0 0 auto */ flex: 2; /* число -> flex-grow, = 2 1 auto */ flex: 50%; /* единица измерения длины -> flex-basis = 50%, = 0 1 50% */ flex: 2 50%; /* flex-grow & flex-basis, = 2 1 50% */ flex: 2 0 50%; } 87

А самое крутое...

88

Родителю — display: flex, ребёнку — margin: auto

стою по-царски по центру и чихал на все выравнивания

89

caniuse.com/#feat=flexbox

90

Полезные ссылки

1.

2.

3.

Гайд по флексбоксу

Flexbox Playground

Игра для изучения флексбокса

91

Грид

92

grid = сетка

Даёт возможность располагать элементыпо сетке!

display: grid

93

грид-контейнер (grid-container)

грид-элемент (grid-item)

линия (grid-line)

ячейка (grid-cell)

область (grid-area)

дорожка (grid-track)

интервал (grid-gap) 94

95

96

97

98

99

100

101

Чтобы наполнить сетку колонкамии рядами существуют свойства

grid-template-columns и grid-template-rows.

102

.container { display: grid; grid-template-columns: 100px auto 100px; /* ширины столбцов */

grid-template-rows: 100px 100px 100px; /* высоты рядов */ }

1 2 3 41

2

3

4

103

.container { display: grid; grid-template-columns: 100px auto 100px; /* ширины столбцов */

grid-template-rows: 100px 100px 100px; /* высоты рядов */ }

a1 2 3 41

2

3

4

104

.container { display: grid; grid-template-columns: 100px auto 100px; /* ширины столбцов */

grid-template-rows: 100px 100px 100px; /* высоты рядов */ }

a b1 2 3 41

2

3

4

105

.container { display: grid; grid-template-columns: 100px auto 100px; /* ширины столбцов */

grid-template-rows: 100px 100px 100px; /* высоты рядов */ }

a b c1 2 3 41

2

3

4

106

.container { display: grid; grid-template-columns: 100px auto 100px; /* ширины столбцов */

grid-template-rows: 100px 100px 100px; /* высоты рядов */ }

a b c

d

1 2 3 41

2

3

4

107

.container { display: grid; grid-template-columns: 100px auto 100px; /* ширины столбцов */

grid-template-rows: 100px 100px 100px; /* высоты рядов */ }

a b c

d e

1 2 3 41

2

3

4

108

.a { grid-row: 1 / 2; grid-column: 1 / 4;

}

a

b c d

e

1 2 3 41

2

3

4

109

.a { grid-row: 1 / 2; grid-column: 1 / 4;

}

.b { grid-row: 2 / 4; grid-column: 1 / 2;

}

a

b c d

e

1 2 3 41

2

3

4

110

.a { grid-row: 1 / 2; grid-column: 1 / 4;

}

.b { grid-row: ➩ 1 / 4; grid-column: 1 / 2;

}

ab

c d

e

1 2 3 41

2

3

4

111

.a { grid-row: 1 / 2; grid-column: 1 / 4;

➩ z-index: 1; }

.b { grid-row: 1 / 4;

grid-column: 1 / 2; }

b

c d

e

1 2 3 41

2

3

4

a

112

Размер дорожки можно указывать в fr –долях свободного места.

Свободное место вычисляется послерасположения всех элементов

фиксированных размеров.

113

.container { display: grid; grid-template-columns: 100px 1fr 1fr;

grid-template-rows: 100px 100px 100px; }

a b c

d e

1 2 3 41

2

3

4

114

.a { grid-column: span 3; }

a

b c d

e

1 2 3 41

2

3

4

115

.a { grid-column: span 3; }

.b { grid-row: span 2; }

a

b c d

e

1

2

3

4

1

2

3

4

116

В контейнере можно создаватьименованные области с помощью

свойства grid-template-areas.

Поместить элемент в область можносвойством grid-area.

117

.container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100px 100px 100px; grid-template-areas: 'sand water'

'sand water' 'grass grass'; }

.a { grid-area: grass; } .b { grid-area: sand;

} .c { grid-area: water; }

a

b c

118

.container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100px 100px 100px; grid-template-areas: 'sand water'

'sand water' '. grass'; }

.a { grid-area: grass; } .b { grid-area: sand;

} .c { grid-area: water; }

a

b c

119

Короче!

Свойство grid-template:

.container { display: grid; grid-template: 'header header' 100px 'sidebar content' 100px 'footer content' 100px / 100px auto; }

120

Используя свойство grid-gap, можно

управлять размером интервалов междулиниями.

Интервал только между рядами —grid-row-gap, только между столбцами —

grid-column-gap.

121

.container { grid-column-gap: 1%;

grid-row-gap: 16px; }

a b

c d

e

122

123

Писать руками?

.container { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr...; }

НЕТ. Есть функция repeat()

.container { grid-template-columns: repeat(12, 1fr); }

124

caniuse.com/#feat=css-grid

125

Полезные ссылки 1.

2.

3.

4.

Grid Explained In 7 Minutes

Гайд по гриду

Grid By Example

Игра для изучения грида

126

Флексбокс или грид?

127

Флексбокс.container { display: flex; }

.column-i { flex: auto; }

Грид.container { display: grid; grid-template-columns: 1fr 1fr 1fr; }

128

Флексбоксодно измерение — ряд или столбец

Гриддва измерения — ряды и столбцы

129

Флексбокс

Грид

130

Флексбоксодно измерение — ряд или столбец

content-first

Гриддва измерения — ряды и столбцы

layout-first

131

<header class="header">

<div class="home">Home</div> <div class="search">Search</div> <div class="logout">Logout</div> </header>

132

Флексбокс.header { display: flex; align-items: center; }

.logout { margin-left: auto; }

Грид.header { display: grid; grid-template-columns: repeat(10, 1fr); }

.logout { grid-column: 10; }

133

<div class="container"> <header class="header">HEADER</header> <aside class="menu">MENU</aside> <main class="content">CONTENT</main>

<footer class="footer">FOOTER</footer> </div>

134

.container { display: grid; grid-template-columns: repeat(12, 1fr);

grid-template-rows: 50px 350px 50px; }

.header { display: flex; align-items: center; } .logout { margin-left: auto; }

.header { grid-column: span 12; }

.menu { grid-column: span 2; } .content { grid-column: span 10; } .footer { grid-column: span 12; }

135

Подходы можно совмещать

136

Две новости

Используя флексбокс и грид, можно сверстать всё что угодно

А таблицы пригодятся для вёрсткиэлектронных писем

137

Про домашку

138

139

условное применение CSS-правил.

Одна разметка, разные наборы стилей.

Медиа-выражения –

140

Задаются с помощью at-правила @media, закоторым следует условие:

141

Media Type задает тип устройства

all – все устройства (по умолчанию)

print — принтеры и режим предпросмотра

screen — устройства с экраном

speech — скринридеры

142

Media Features задают техническиехарактеристики устройства

width – ширина вьюпорта

height — высота вьюпорта

orientation — ориентация вьюпорта

resolution — разрешение устройствавывода

143

Ширина вьюпорта/* для мобильных */ body { background: red; }

/* для планшетов */ @media screen and (min-width: 768px) { body { background: yellow; } } /* для десктопов */ @media screen and (min-width: 1280px) { body { background: blue; } }

144

145

Полезные ссылки 1.

2.

@media на MDN

Responsive Design Tutorial

146