CSS. Урок 11 Адаптивна верстка сторінки flex box

1. Поняття адаптивної верстки

Одна з головних вимог сучасного сайтобудування - адаптивна верстка, тобто коректне відображення web-сторінки при будь-якому розмірі вікна браузера та на будь-яких пристроях.

Для адаптивної верстки існує декілька різних веб технологій. Одна з таких, про яку варто дізнатися, це flex-box.

2. flex контейнер

Технологія flex-box, це контейнер для якого встановлено стиль display:flex. Цей стиль робить блок гнучким, наче він гумовий. Далі контейнер наповнюють дочірними блоками(items).

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

file css
.container
{
display:flex;
background-color:blue;
}
.item
{
background-color:lightblue;
padding:20px;
font-size:22pt;
}

file html
<html>
<head>
<link rel="stylesheet" href="file.css">
</head>
<body>
<div class = container>
     <div class = item> 1 </div>
     <div class = item> 2 </div>
     <div class = item> 3 </div>
</div>
</body>
</html>

3. Форматування блоків всередені контейнера justify-content

Елементи всередені контейнера можна розташувати рызними способами. Для цього використовують стиль justify-content який застосовують до контейнера.

Розглянемо різні варіанти форматування елементів в контейнері

Значення Розташування блоків
justify-content:flex-start; Блоки на початку контейнера(за замовченням).
1
2
3
justify-content:flex-end; Блоки в кінці контейнера
1
2
3
justify-content:center; Блоки в центрі
1
2
3
justify-content:space-around; Рівномірний розподіл простіру контейнера. Відстані перед першим та після останнього блоками = 1/2 відстані між сусідніми блоками
1
2
3
justify-content:space-between; Рівномірний розподіл простіру контейнера. Перший і останій елементи притиснено до країв контейнера.
1
2
3
justify-content:space-evenly Рівномірний розподіл простіру контейнера. Відстань між блоками та краями контейнера однакова.
1
2
3

4. Властивість flex-direction

flex-direction задає напрям вишуковання дочірних блоків (в рядок чи в стовпчик). Цей стиль також застосовується до контейнера і має такі значення:

flex-direction:row (за замовченням)

1
2
3

flex-direction:row-reverse

1
2
3

flex-direction:column

1
2
3

flex-direction:column-reverse

1
2
3

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

file css
body
{
background-color:#F5DEB3
}
h3
{
text-align:center;
font-family:verdana;
font-size:40px;
color:grey;
}
.container
{
display:flex;
justify-content:space-evenly;
background-color:blue;
}
.item
{
width:200px;
color:white;
background-color:blue;
font-size:18pt;
padding:20px;
margin:15px;
text-align:center;
}

file html
<html>
<head>
<link rel="stylesheet" href="file.css">
</head>
<body> <h3>Онлайн школа<hr></h3>
<div class = container>
     <div class = item> <hr>Уроки фізики<hr></div>
     <div class = item> <hr>Уроки хімії<hr> </div>
     <div class = item> <hr>Уроки математики<hr> </div>
</div>
</body>
</html>

Вправа в редакторі html

1. Завантажте файл з завданням.

2. Створіть сторінку з блоками, обравши один з варіантів їх форматування за технологією flex-box.