11. Flex Box вёрстка

1. Flexbox вёрстка

2.

FlexBox
FlexBox – новая технология, которая уже имеет достаточно широкую
поддержку браузеров. Flexbox предоставляет инструменты для быстрого
создания сложных, гибких макетов, и функции, которые были сложны в
традиционных методах CSS.
CSS Flexbox — это технология для создания сложных гибких макетов за
счёт правильного размещения элементов на странице.
С помощью этой технологии можно очень просто и гибко расставить
элементы в контейнере, распределить доступное пространство между ними, и
выровнять их тем или иным способом даже если они не имеют конкретных
размеров.
CSS Flexbox позволяет создать адаптивный дизайн намного проще, чем с
использованием Float и позиционирования.
Flexbox можно использовать как для CSS разметки целой страницы, так и
её отдельных блоков.
CSS Flexbox поддерживается всеми используемые на сегодняшний момент
современными браузерами (с использованием префиксов: IE10+, Edge12+,
Firefox 2+, Chrome 4+, Safari 3.1+, Opera 12.1+, iOS Safari 3.2, Opera mini,
Android 2.1+, Blackberry 7+).
2

3.

FlexBox
Разберёмся, как работает display flex CSS. Есть страница:На ней
размещено 4 div разных размеров, которые находятся внутри серого div. У
каждого div есть свойство display: block. Поэтому каждый блок занимает
всю ширину строки. И вот как реализовать CSS display flex. Чтобы начать
работать с CSS Flexbox, нужно сделать контейнер flex контейнером.
3

4.

FlexBox
Flex-direction:
У flex-контейнера есть две оси: главная и перпендикулярная ей. По
умолчанию все предметы располагаются вдоль главной оси — слева направо.
Именно поэтому блоки в предыдущем примере выстроились в линию, когда
мы применили display: flex. А вот flex-direction позволяет вращать главную
ось. Есть ещё парочка свойств для flex-direction: row-reverse и column-reverse.
4

5.

FlexBox
justify-content:
Отвечает за выравнивание элементов по главной оси.
Может принимать 5 значений:
1. flex-start
2. flex-end
3. center
4. space-between
5. space-around
Space-between задаёт одинаковое расстояние между блоками, но не
между контейнером и блоками. Space-around также задаёт одинаковое
расстояние между блоками, но теперь расстояние между контейнером и
блоками равно половине расстояния между блоками.
Сейчас создайте на своём сайте пять flexbox и опробуйте эти значения.
Помимо обычного <div>, возможно использовать <section>.
Он представляет собой автономный раздел — который не может быть
представлен более точным по семантике элементом. А также <article> —
представляет самостоятельную часть документа, страницы, приложения
или сайта, предназначенную для независимого распространения или
повторного использования.
5

6.

FlexBox
align-items
Если justify-content работает с главной осью, то align-items работает с
осью, перпендикулярной главной оси. Вернёмся к flex-direction: row и
пройдёмся по командам align-items.
1. flex-start
2. flex-end
3. center
4. stretch
5. baseline
Стоит заметить, что для align-items: stretch высота блоков должна быть
равна auto.
6

7.

FlexBox
align-self:
Позволяет выравнивать элементы по отдельности.
Для двух блоков применим align-self, а для остальных — align-items:
center и flex-direction: row.
7

8.

FlexBox
flex-basis:
Отвечает за изначальный размер элементов до того, как они будут
изменены другими свойствами CSS Flexbox. flex-basis влияет на размер
элементов вдоль главной оси.
Заметьте, что нам приходится изменить и высоту элементов: flexbasis может определять как высоту элементов, так и их ширину в
зависимости от направления оси.
8

9.

FlexBox
flex-grow:
По умолчанию значение flex-grow равно 0. Это значит, что блокам
запрещено увеличиваться в размерах.
flex-grow принимает не абсолютные значения, а относительные. Это
значит, что не важно, какое значение у flex-grow, важно, какое оно по
отношению к другим блокам.
flex-grow работает только для главной оси, пока мы не изменим её
направление.
9

10.

FlexBox
flex-shrink:
Прямая противоположность flex-grow. Определяет, насколько блоку
можно уменьшиться в размере.
flex-shrink используется, когда элементы не вмещаются в контейнер. Вы
определяете, какие элементы должны уменьшиться в размерах, а какие —
нет. По умолчанию значение flex-shrink для каждого блока равно 1. Это
значит, что блоки будут сжиматься, когда контейнер будет уменьшаться.
flex-shrink основывается на пропорциях. То есть, если у первого
блока flex-shrink равен 6, а у остальных он равен 2, то, это значит, что первый
блок будет сжиматься в три раза быстрее, чем остальные.
10

11.

FlexBox
Flex:
Заменяет flex-grow, flex-shrink и flex-basis. Значения по умолчанию:
0 (grow) 1 (shrink) auto (basis).
У обоих одинаковый flex-basis. Это значит, что оба будут шириной в
300px (ширина контейнера: 600px плюс margin и padding). Но когда
контейнер начнет увеличиваться в размерах, первый блок (с большим flexgrow) будет увеличиваться в два раза быстрее, а второй блок (с
наибольшим flex-shrink) будет сжиматься в два раза быстрее.
11

12.

Задания
Выполните практическое задание:
Создайте сайт с использованием flexbox;
Создайте сайт с описанием биографии людей, а также отдельно страницы
для описания случаев или изобретений, которые связаны с человеком.
Или же создайте страницу, где будет присутствовать коллекция изображений,
замените таблицы, если они есть, на flexbox, или же создайте афишу;
2. Используйте CSS для изменения дизайна и внешнего вида сайта;
3. Изменяйте блочную структуру объектов сайта;
4. Добавляйте изображения, ссылки и т.д.
1.

13. Благодарю за внимание