Flexbox у CSS & HTML (Навчання) – створення адаптивних макетів

Це чекає на вас у курсі з Flexbox у CSS та HTML.

Що таке макет Flexbox і навіщо його взагалі варто використовувати?

Тут буде створено проєкт, в якому подальш за ним буде працювати.

Я представлю тут прикладну структуру та можливості налагодження, які вбудовані у VS-Code за допомогою інструментів MS Edge. Крім того, в цьому відео вперше активується Flexbox-макет та встановлюється напрямок.

Як можна розділити простір рівномірно або у певних відношеннях у макеті Flexbox?

Невелике вправа, під час якої не обійтися без трохи (простої) математики.

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

Дитинчаті елементи можуть бути вирівняні вздовж поперечної вісі контейнера Flex. Ось показано, як це можна налаштувати.

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

Невелике вправа для вирівнювання за допомогою кубика.

Не лише вздовж поперечної вісі можна вирівнювати у гнучкому контейнері, але також можна вирівнювати вздовж головної вісі обраний напрямок вирівнювання. ;-)

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

Хто бажає бути гнучким, повинен мати можливість вказати розміри дочірніх елементів незалежно від конкретної ширини або висоти. Щасливо, що існує властивість flex-basis-, за допомогою якої цього можна досягти. Якщо змінюється flex-direction,, ширина стає висотою і навпаки.  

На скільки має збільшитися елемент, коли доступно більше місця, ніж вказує flex-basis? Це можна налаштувати за допомогою властивості flex-grow.

Наскільки має зменшитися елемент, якщо місця менше, ніж вказує flex-basis? Це можна налаштувати точно за допомогою flex-shrink. 

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

flex-direction та flex-wrap можна вказати у властивості flex-flow в поєднанні. Це навіть має сенс, коли ви хочете встановити лише flex-direction, оскільки flex-flow коротший. ;-)

Задача з flex-wrap.

Іноді потрібно тримати відстань, щоб не дати змучити людському оку зайво. На щастя, є властивість CSS з назвою gap, яка робить це саме для дочірніх елементів контейнера Flex.

Порядок повинен бути, особливо у веб-інтерфейсах, оскільки вони повинні бути зручними в користуванні. Порядок іноді також потрібно встановлювати індивідуально, не переміщаючи елементи в DOM. Для цього дуже підходить властивість CSS order, за допомогою якої можна легко змінити видимий порядок елементів.

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

Дуже часто виникає ситуація, коли ви бажаєте вирівняти елементи і, особливо, текст по горизонталі і вертикалі (!). Те, що було мороком до Flexbox, з Flexbox стало дитячою грою.

Хто не знає його, 3-колонки? Якщо він вміє пристосовуватися до доступного місця, то не вистачає небагато до адаптивного дизайну.

Чи є веб-сайти без форм? Якщо так, то їх небагато. Тому дуже важливо створити зручну композицію, що, на щастя, не є проблемою з Flexbox.

Дуже часто вам доводиться мати справу з вкладеними макетами, але з Flex-Layout навіть такі уже не є великим викликом.

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

Не пізніше, ніж з появою Web 2.0, на практично кожному веб-сайті ви знайдете галерею. У цьому відео я пояснюю, як такий макет може бути чудово реалізований, наприклад, за допомогою Flexbox.

Тепер все повинно бути ясно щодо Flex-Layout. На завершення я опишу, що ви мали б вивчити, що ви можете зробити ще і які ще є чудові можливості CSS-макетування.