urfu-2018.github.io · 2019. 5. 20. · Раскладка на инлайн-блоках:...

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

Layout

1

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

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

2

<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



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

Свойство 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

https://drafts.csswg.org/css-flexbox-1/#resolve-flexible-lengths

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

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

80

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

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


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


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


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


.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


.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


.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

https://caniuse.com/#feat=flexbox

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

1.

2.

3.

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

Flexbox Playground

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

91

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://codepen.io/enxaneta/full/adLPwv/

http://flexboxfroggy.com/

Грид

92

grid = сетка

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

display: grid

93

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

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

линия (grid-line)

ячейка (grid-cell)

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

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

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

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

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



a1 2 3 41

2

3

4

104



a b1 2 3 41

2

3

4

105



a b c1 2 3 41

2

3

4

106



a b c

d

1 2 3 41

2

3

4

107



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


}

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

}

a

b c d

e

1 2 3 41

2

3

4

110


}

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

}

ab

c d

e

1 2 3 41

2

3

4

111


➩ 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

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

.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

https://caniuse.com/#feat=css-grid

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

2.

3.

4.

Grid Explained In 7 Minutes

Гайд по гриду

Grid By Example

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

126

https://www.youtube.com/watch?v=ojKbYz0iKQE

https://css-tricks.com/snippets/css/complete-guide-grid/

https://gridbyexample.com/examples/

http://cssgridgarden.com/

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

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

условное применение 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

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

2.

@media на MDN

Responsive Design Tutorial

146

https://developer.mozilla.org/en-US/docs/Web/CSS/@media

https://internetingishard.com/html-and-css/responsive-design/

urfu-2018.github.io · 2019. 5. 20. · Раскладка на инлайн-блоках:...

Documents

Transcript of urfu-2018.github.io · 2019. 5. 20. · Раскладка на инлайн-блоках:...