Використання Flexbox в CSS3 для адаптивного дизайну
У цій статті хочемо більш детально зупинитися на використанні flexbox в CSS3, в якості одного з просунутих способів досягнення адаптивності на сайті.
При створенні CSS складність макетів була не такою, якою вона буває в наші дні. Раніше макети були з фіксованою шириною і невеликими варіаціями розташування блоків, а сьогодні макети сайтів можуть набувати практично будь-які обриси. Все це змушує розробників придумувати хакі для CSS, щоб контент відображався більш-менш правильно.
Flexbox (гнучкі коробки) - це відносно новий режим розмітки в CSS3, призначений для поліпшення вирівнювання, напрямки та порядку елементів в контейнері, навіть якщо він є динамічним або з невідомими розмірами. Це найважливіша особливість - можливість змінювати ширину або висоту дочірніх елементів в блоці, щоб найкращим чином заповнити обсяг пам'яті, доступний при різних розмірах екрану.
Що таке Flexbox?
Flexbox - це режим розмітки, створений для впорядкування елементів на сторінці таким чином, щоб вони вели себе передбачувано для випадків адаптивності сторінки під різні розміри екрану і для різних пристроїв.
Використовуючи flexbox, контейнер і його дочірні елементи можуть бути розташовані в будь-якому напрямку: вліво, вправо і навіть вгору або вниз. Ви можете вибрати потрібний порядок елементів на сторінці та впорядкувати їх, вирівняти вміст по ширині справа наліво за допомогою одного властивості, і навіть додати будь-яку кількість стовпців в розмітку сторінки свого сайту. Розмір блоків також є гнучким, оскільки елементи мігЩо таке Flexbox?
Що таке Flexbox?