Від автора: У цьому уроці ми продовжимо вивчення модуля CSS3 Flexbox. У попередньому уроці ми торкнулися ключове поняття даного модуля – поняття осей. У цьому уроці ми більш детально розберемося в питаннях роботи з осями: для чого вони потрібні, як ними управляти, розглянемо кілька нових властивостей, що дозволяють управляти осями і, відповідно, flex-елементами. Також ми дізнаємося кілька нюансів, про які варто пам’ятати при роботі з flex-версткою.
 |
Автор: Андрій КудлайЗвуть мене Андрій Кудлай. Родом я з України, живу в Дніпропетровську. Веб-програмування вчився сам. Непогано знаю HTML, CSS, PHP, JavaScript. |
Отже, ми вже знаємо, що Flex-контейнер оперує двома осями, згідно з якими вибудовуються Flex-елементи: це головна вісь і поперечна вісь. Головна вісь за замовчуванням горизонтальна вісь X) і її напрямок зліва направо (мовна локаль ltr – left to right). Поперечна вісь завжди перпендикулярна до головної, тобто вона є вертикальною і йде зверху вниз.
Давайте спробуємо почати управляти осями. За це відповідає властивість flex-direction. Ось його можливі значення:
row (за замовчуванням): зліва направо для ltr, справа наліво для rtl;
row-reverse: справа наліво для ltr, зліва направо для rtl;
column: аналогічно row, зверху вниз;
column-reverse: аналогічно row-reverse, знизу вгору.
Можемо погратися з даними властивістю і його значеннями, щоб побачити зміни в роботі flex-елементів. Щоб простіше було стежити за поведінкою елементів, давайте трохи спростимо підсумковий варіант стильового оформлення з попереднього уроку. HTML буде таким:
І CSS:
*{
margin: 0;
padding: 0;
}
.wrap{
display: flex;
flex-direction: row; /* значення за умовчанням */
height: 500px;
width: 500px;
border: 1px solid #ccc;
margin: 20px auto;
}
.block{
background: #26a082;
color: #fff;
font-size: 20px;
border: 1px solid #ccc;
}
Як бачимо, використовую тільки одне це властивість, ми без проблем можемо розташувати елементи у вигляді колонок або рядів, а також перевертання їх порядок.
Перейдемо до наступного властивості — justify-content, що дозволяє вирівняти елементи відносно головної осі:
flex-start (за замовчуванням): елементи зсуваються до початку рядка;
flex-end: елементи зсуваються до кінця рядка;
windows: елементи вирівнюються по центру рядка;
space between: елементи розподіляються рівномірно (перший елемент на початку рядка, останній — в кінці);
space-around: елементи розподіляються рівномірно з рівною відстанню між собою і кордонами рядка.
Погравши зі значеннями даного властивості, ми побачимо, як легко можна керувати розташуванням елементів: притиснути їх до будь-якого краю контейнера або просто вирівняти по центру.
Ну і для більш тонкого управління елементами, ми можемо скористатися ще однією властивістю — align-items, що дозволяє управляти вирівнюванням елементів відносно поперечної осі:
flex-start: межа cross-start для елементів розташовується на позиції cross-start;
flex-end: межа cross-end для елементів розташовується на позиції cross-end;
windows: елементи вирівнюються по центру поперечної осі;
baseline: елементи вирівнюються по своїй базовій лінії;
stretch (за замовчуванням): елементи розтягуються, заповнюючи контейнер (з урахуванням min-width/max-width).
На цьому поточний урок завершено. У наступному уроці ми продовжимо вивчення модуля Flexbox. Удачі і до нових зустрічей!
