От автора: в этой статье я постараюсь объяснить, как создать панель навигации, которая адаптируется к различным размерам экрана, используя Flexbox вместе с медиа-запросами.   Установка Давайте начнём с разметки для очень простой панели навигации: <nav> <ul class="container"> <li>Home</li> <li>Profile</li> <li class="search"> <input type="text" class="search-input" placeholder="Search"> </li> <li>Logout</li> </ul> </nav> Элемент ul — это наш flex-контейнер, а li элементы — это ...

Перевод статьи Avoiding chaos when using Flexbox ‘order’ для css-live.ru, с разрешения автора — Амелии Беллами-Ройдз Недавняя твиттерная суматоха вынудила меня сделать наконец демо с флексбоксами, которое я хотела создать еще с тех пор, как впервые начала экспериментировать с flex-свойствами CSS. Рома Комаров поделился исследованием, как с помощью флексбоксов и CSS-свойства order получить эффект сортировки таблицы на чистом CSS. Другие CSS-эксперты ...

По инсайдерской информации из W3C, просочившейся наружу в виде твита Рейчел Эндрю, рабочая группа CSS решила опубликовать первый рабочий черновик CSS-гридов второго уровня. С долгожданными подсетками и не только! Пока CSS-гриды второго уровня существуют только в виде редакторского… даже не черновика, а «неофициального предложения», сборника набросков «идей на будущее». Зато вариантов синтаксиса для подсеток в нем целых 2, включая гибкую ...

Спецификация CSS Box Alignment становится всё более зрелой, и кроме шпаргалки по выравниванию блоков Рейчел Эндрю и нашего обзора свойств для выравнивания всего в сети появляются новые материалы о ней. Пожалуй, пришла пора и нам освежить знания об этих свойствах. Общий принцип Спецификация CSS Box Alignment предлагает 9 свойств для выравнивания всего. Все они состоят из двух частей и получаются ...