CSS3 flex-бокс, або flexbox, це режим розмітки створений для упорядкування елементів на сторінці таким чином, щоб вони поводилися передбачувано у випадках, коли розмітка сторінки адаптована під різні розміри екрану і різні девайси. В багатьох випадках flexible box є вдосконаленням блокової моделі розмітки, яка не використовує обтікання (floats) і не виконує схлопування відступів flex контейнера і його контенту (margins collapse).
Flex-контейнер
Батьківський елемент, у якому містяться flex-айтеми. Flex-контейнер визначається
Flex-айтем
Осі
flex
або inline-flex
значеннями display
властивості.
Кожен дочірній елемент flex-контейнеру стає flex-айтемом. Текст, що напряму міститься в flex-контейнері обгортається анонімним flex-айтемом.
Кожен flexible-бокс шаблон будується по двох осях. Головна вісь (main axis) - вісь, вздовж якої flex-айтеми слідують один за одним. Перехресна вісь (cross axis) вісь, що перпендикулярна до main axis.
Display: Flex
Приклад сторінки:

Є 4 разнокольорових div’а різних розмірів, які знаходяться всередині сірого div’а. У кожного div’а євластивість
display: block
. Тому кожний квадрат займає всю ширину рядка.
Що перетворити звичайні div’и у flexbox, потрібно для блоку контейнеру примінити властивость display із значенням flex:
#container {
display: flex;
}

Flex-direction
У flex-контейнера є дві осі: головна вісь і перпендикулярна їй.

По замовчуванню всі предмети розташовуються вздовж головної вісі: зліва направо. Тому вкладені блоки у контейнер вирівнюються в лінію, коли застосовується властивість
Напрямок розкладки блоків керується властивістю display: flex
. flex-direction
.flex-direction
дозволяє обертати головну вісь.
Значения властивості flex-direction::
row
— рядок (значення по замовчуванню);
row-reverse
— рядок з елементами в зворотньому порядку;
column
— колонка;
column-reverse
— колонка з елементами в зворотньому порядку.#container {
display: flex;
flex-direction: column;
}

Важливо!
flex-direction: column
не вирівнює квадрати по осі, яка перпендикулярна головній. Головна вісь сама змінює своє розташування і тепер направлена зверху вниз.
Значення властивості flex-direction:
row-reverse
і column-reverse
.Justify Content
Justify-content
відповідає за вирівнювання елементів по главній осі.
Властивість
flex-direction: row
.#container {
display: flex;
flex-direction: row;
justify-content: flex-start;
}
Justify-content
може приймати 5 значень:flex-start
;flex-end
;center
;space-between
;space-around
.

Space-between
задає однакову відстань між квадратами, але не між контейнером і квадратами. Space-around
також задає однакову відстань між квадратами, але тепер відстань між контейнером і квадратами дорівнює половині відстані між квадратами.Align Items
Якщо
justify-content
працює з головною віссю, то align-items
працює з віссю, перпендикулярною главній осі.
Отже, якщо
flex-direction: row
, то блоки в контейнері відносно перпендикудярної осі при різних значеннях align-items
будуть поводити себе таким чином:flex-start
;flex-end
;center
;stretch
;baseline
.

Щоб проілюструвати як працюють осі можна побачити, якщо для контейнера вказати такі властивості:
justify-content
, align-items
, flex-direction
:
Align Self
Align-self
дозволяє вирівнювати елементи кожен окремо.#container {
align-items: flex-start;
}
.square#one {
align-self: center;
}
// Only this square will be centered.
Наприклад, якщо для двох квадратів застосувати
align-self
, а для інших align-items: center
і flex-direction: row
., то результат буде таким:
Flex-Basis
Flex-basis
відповідає за початковий розмір елементів до того, як вони будуть змінені іншими властивостями Flexbox:
Flex-basis
впливає на розмір елементів вздовж головної осі.
Якщо змінити напрямок головної осі, результат буде таким:

Flex Grow
Якщо задати блокам однакову ширину в 120 рх :

По замовчуванню
flex-grow
дорівнює 0. Це означає, що квадратам заборонено рости (займати вільне місце в контейнері).
Якщо задати
flex-grow
=1 для кожного блока:
Блоки займуть вільне місце в контейнері. Значення
flex-grow
анулює значення ширини.
Это значит, что не важно, какое значение у
flex-grow
, важно, какое оно по отношению к другим квадратам:
Вначале
flex-grow
каждого квадрата равен 1, в сумме получится 6. Значит, наш контейнер поделен на 6 частей. Каждый квадрат будет занимать 1/6 часть доступного пространства а контейнере.
Когда
flex-grow
третьего квадрата становится равным 2, контейнер делится на 7 частей (1 + 1 + 2 + 1 + 1 + 1).
Теперь третий квадрат занимает 2/7 пространства, остальные — по 1/7.
И так далее.
Стоит помнить, что
flex-grow
работает только для главной оси (пока мы не поменяем ее направление).Flex Shrink
Flex-shrink
— визначає на скільки блоку можна зменшитись в розмірі.Flex-shrink
використовується, коли елементи не поміщаються в контейнер.
По замовчуванню значення
flex-shrink
для кожного квадрата дорівнює 1. Це означає, що квадрати будуть стискатися, коли контейнер буде зменшуватись.
Якщо
flex-grow
і flex-shrink
=1:
Якщо встановити, наприклад, для властивості
flex-shrink
значення для третього блока=0, то цей блок стискатись не буде і його ширина залишиться 120px:
Приклад для вивчення CSS - властивостей flexbox:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flaxbox</title>
<style>
ul {
display: flex;
margin: 0;
padding: 0;
background: #ea8c8c;
list-style: none;
flex-wrap: wrap;
height: 500px;
}
li {
margin: 5px;
background: #c3e2d2;
border-radius: 3px;
}
ul li:last-of-type {
}
</style>
</head>
<body>
<div class="container-thingy">
<ul>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/pear.svg" alt="Pear graphic" /></li>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/grapes_copy.svg" alt="Grapes graphic" /></li>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/orange.svg" alt="Orange graphic" /></li>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/pear.svg" alt="Pear graphic" /></li>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/grapes_copy.svg" alt="Grapes graphic" /></li>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/orange.svg" alt="Orange graphic" /></li>
</ul>
</div>
</body>
</html>
hjeohjiojNOEM.dll
ВідповістиВидалитиЯ надзвичайно задоволений послугою кредитування містера Педро, і ваші пропозиції допомогли мені отримати дуже хорошу позику на житло. Я буду радий порекомендувати ваші послуги своїм друзям, які шукають позику.” не йдіть нікуди більше, якщо шукаєте позику. містер Педро найкращий. дуже рекомендую його послуги. Найкраще, з чим я коли-небудь мав задоволення працювати, це його кредит із низькою ставкою. ” це зв’язок з містером Педро на всяк випадок, якщо хтось тут шукає позику. WhatsApp: +18632310632. & електронна адреса: pedroloanss@gmail.com
ВідповістиВидалити