Grid конспект

Flexbox - просто про головне!

Що таке Flexbox?

Flexbox - це спеціальний режим розташування елементів на сторінці, що дозволяє легко керувати вирівнюванням, розміром та порядком.

Як створити флекс-контейнер?

display: flex; - додаємо до контейнера, щоб зробити його флекс-контейнером.

Головна та допоміжна осі

Основна вісь — напрямок розташування елементів (горизонтально чи вертикально). Допоміжна — перпендикулярна до основної.

flex-direction

row
1
2
3
row-reverse
1
2
3
column
1
2
3
column-reverse
1
2
3

justify-content

Керує розташуванням елементів по головній осі.

flex-start
1
2
3
flex-end
1
2
3
center
1
2
space-between
1
2
3
space-around
1
2
3
space-evenly
1
2
3

align-items

Керує розташуванням по допоміжній осі.

flex-start
1
2
flex-end
1
2
center
1
2
stretch
1
2
baseline
Великий
Маленький

align-self

Керує вирівнюванням окремого елементу.

центр
звичайно

order

Змінює порядок елементів.

1 (order:2)
2 (order:1)
3 (order:3)

flex-basis

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

100px
200px

flex-grow

Як елементи розширюються при наявності вільного простору.

grow: 1
grow: 2
grow: 3

flex-shrink

Як елементи стискаються при нестачі простору.

shrink: 1
shrink: 2
shrink: 3

Скорочений запис flex

Можна записувати однією командою: flex: flex-grow flex-shrink flex-basis;

Наприклад: flex: 1 1 100px;

Медіа-запити

Вони допомагають зробити сайт адаптивним — тобто змінювати вигляд залежно від розміру екрана.

Змініть ширину вікна браузера, і фон сторінки зміниться при ширині менше 600px.

@media (max-width: 600px) {
        body {
          background-color: pink;
        }
      }