Властивість flexbox в css3.

Всім привіт! Сьогодні ми поговоримо про дуже цікавому властивості flexbox, який з`явився в CSS3.

властивість flexbox було створено для того, щоб нам було зручно розташовувати елементи, коли ми не знаємо їх кількість і / або розміри.

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

Joni Bologna - дівчина-дизайнер вже зробила прекрасну шпаргалку по цій темі, і ми будемо використовувати її, щоб краще зрозуміти дане властивість. Перейдіть по посиланню Flexbox Cheatsheet, і тут ви знайдете PDF файл з наочним описом.

Тут все дуже зрозуміло, так що ви і самі розберетеся, але я зроблю кілька пояснень.

По-перше, у нас є flex-контейнер - контейнер, який містить flex-елементи.

По-друге, у нас є головна напрямна (по горизонталі) і перетинає її перпендикулярна вісь (по вертикалі). У кожної з цих осей є початок і кінець.

Щоб активувати властивість, просто створіть контейнер і пропишіть йому властивість

Відео: Знайомство з CSS Flexbox

.container { 
 display: flex- 
}

Далі ви можете вибрати потрібний вам напрямок: горизонтально (row) Або вертикально (column)

Для першого:

flex-direction: row-

Для другого:

flex-direction: column-

Щоб поміняти порядок розташування елементів (тобто. Перший стане останнім, а останній першим), вам потрібно додати приставку -reverse

flex-direction: row-reverse-

або

flex-direction: column-reverse-

Крім цього, ви можете вибрати, як повинні розташовуватися елементи на прямий: на початку, середині або наприкінці.

justify-content: flex-start-// на початку 
justify-content: center-// в центрі 
justify-content: flex-end-// в кінці

Крім цих значень, є також space-between і space-around. Перше означає, що елементи будуть розташовуватися з рівними відступами між собою, другий означає, що буде взята половина відступу на початку, кінці і між елементами.

Ще одна сильна річ у властивості flexbox - flex-wrap. Тобто ви можете вказати, як вести себе елементам при зміні області перегляду. Наприклад, ви можете вказати

flex-wrap: wrap-

І тоді, при зменшенні області перегляду, елементи будуть ставати до лав. Тобто вести себе так, ніби-то у нас є сітка. Це може бути дуже зручно для галереї, як приклад.

Відео: Flexbox CSS3 # 4 - управляємо розмірами блоків

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

Дякую за увагу і удачі!

Поділися в соціальних мережах:

Схожі