Модуль Flexbox. Урок 2

20

Від автора: У цьому уроці ми продовжимо вивчення модуля CSS3 Flexbox. У попередньому уроці ми торкнулися ключове поняття даного модуля – поняття осей. У цьому уроці ми більш детально розберемося в питаннях роботи з осями: для чого вони потрібні, як ними управляти, розглянемо кілька нових властивостей, що дозволяють управляти осями і, відповідно, flex-елементами. Також ми дізнаємося кілька нюансів, про які варто пам’ятати при роботі з flex-версткою.

Модуль Flexbox. Урок 2

Автор: Андрій Кудлай

Звуть мене Андрій Кудлай. Родом я з України, живу в Дніпропетровську. Веб-програмування вчився сам. Непогано знаю HTML, CSS, PHP, JavaScript.

Модуль Flexbox. Урок 2Модуль Flexbox. Урок 2

Отже, ми вже знаємо, що Flex-контейнер оперує двома осями, згідно з якими вибудовуються Flex-елементи: це головна вісь і поперечна вісь. Головна вісь за замовчуванням горизонтальна вісь X) і її напрямок зліва направо (мовна локаль ltr – left to right). Поперечна вісь завжди перпендикулярна до головної, тобто вона є вертикальною і йде зверху вниз.

Давайте спробуємо почати управляти осями. За це відповідає властивість flex-direction. Ось його можливі значення:

row (за замовчуванням): зліва направо для ltr, справа наліво для rtl;

row-reverse: справа наліво для ltr, зліва направо для rtl;

column: аналогічно row, зверху вниз;

column-reverse: аналогічно row-reverse, знизу вгору.

Можемо погратися з даними властивістю і його значеннями, щоб побачити зміни в роботі flex-елементів. Щоб простіше було стежити за поведінкою елементів, давайте трохи спростимо підсумковий варіант стильового оформлення з попереднього уроку. HTML буде таким:

Block 1
Block 2
Block 3

І 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. Удачі і до нових зустрічей!