Upload
others
View
14
Download
0
Embed Size (px)
Citation preview
Лена Рашкован
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>
.column1
.column2
.column3
.column1 .column2 .column3
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
С помощью сокращённого свойства 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
Полезные ссылки
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
Полезные ссылки 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