Главная » Архив меток: flexbox

Архив меток: flexbox

Понимание gap в CSS

От автора: возможно, вы уже знаете о свойстве CSS gap. Оно не совсем ново, но в прошлом году это свойство получило новую важную возможность: теперь оно работает во Flexbox в дополнение к CSS Grid. Это, а также тот факт, что я считаю свойство более сложным, чем кажется, заставили меня объяснить, как именно оно работает. Давайте внимательно рассмотрим gap и связанные ...

Читать далее »

В чем разница между значениями выравнивания start, flex-start и self-start?

От автора: в этом посте вы узнаете разницу между значениями выравнивания start, flex-start и self-start в flexbox. При выравнивании элементов по началу и концу строки в flexbox есть несколько значений на выбор. В этом посте я собираюсь объяснить разницу между некоторыми значениями, которые, как кажется, делают очень похожие вещи: flex-start и flex-end start и end self-start и self-end Значения start, ...

Читать далее »

Что такое flex-grow, flex-shrink и flex-basis

От автора: когда вы применяете свойство CSS к элементу, происходит множество вещей, невидимых на первый взгляд. Например, допустим, у нас есть такой HTML: <div class="parent"> <div class="child">Child</div> <div class="child">Child</div> <div class="child">Child</div> </div> А потом мы пишем CSS … .parent { display: flex; } Технически это не один стиль, который мы применяем, когда пишем одну строку CSS выше. Фактически, здесь к ...

Читать далее »

Создание заголовков веб-сайтов с помощью CSS Flexbox

От автора: когда в 2014 году я впервые изучал основы HTML и CSS, создание заголовка веб-сайта было для меня одной из этих страшных и сложных задач. Flexbox был еще новым, и мы были вынуждены использовать старые методы, например, float. Сегодня картина совершенно другая. Flexbox широко поддерживается, и это открывает для нас много возможностей. Некоторые могут возразить, что в наше время ...

Читать далее »

Подробное рассмотрение свойств Flex

От автора: вы когда-нибудь задумывались о том, как работает свойство CSS flex? Это сокращение от flex-grow, flex-shrink и flex-basis. Наиболее распространенный вариант использования, который я вижу в Интернете — flex: 1. Это возможность flex-элемента расширяться и заполнять все доступное пространство. В этой статье я подробно рассмотрю сокращенные и полные свойства и объясню, когда и для чего их использовать, с практическими ...

Читать далее »

Совместное использование Flexbox и текстового многоточия

От автора: как-то меня попросили создать таблицу, содержащую список файлов, загруженных пользователями. Представьте себе таблицу, похожую на список файлов в Finder. Примерно такой список: Второй элемент таблицы mobile-phone-screenshot-long-fine-name.png, однако столбец не достаточно большой, чтобы показать полное имя файла. Вместо этого мы видим mobile-phone-sc…g-fine-name.png. В этом проекте мы решили вырезать часть конца имени файла и сохранить расширение, как показано выше: HTML-разметка: ...

Читать далее »

Приключения Masonry-раскладки в CSS

«Masonry-раскладка», она же «плиточная верстка», она же «раскладка кирпичиками», она же «Cascading Grid», она же — вернее, один из ее вариантов — «верстка как у Pinterest», она же… в общем, задача верстки такого типа макетов известна верстальщикам очень давно, под многими именами. Раньше на чистом CSS она до конца не решалась. Можно было добиться внешне похожего результата для частных случаев, но какой-то нюанс ускользал. На практике приходилось использовать JS-библиотеки — прежде всего Masonry, написанную Дейвом ДеСандро и, собственно, ...

Читать далее »

Создание адаптивных макетов без использования медиа-запросов

От автора: привет всем! Дискуссии на эту тему ведутся с тех пор, как появились grid и flexbox со всеми своими интересными аспектами, заставляющими контент быстро реагировать на область просмотра. Тем не менее, это может быть пугающим для тех, кто начинает использовать такие передовые технологии CSS, как grid и flexbox, которые могут создавать привлекательные макеты — но не делать их адаптивными ...

Читать далее »

Элементы равной высоты: Flexbox vs. Grid

От автора: когда-то давно (примерно 7 лет назад) я написала плагин jQuery для вычисления столбцов одинаковой высоты. Это гарантировало, что очень специфический сценарий строки с тремя столбцами будет поддерживать поля содержимого равными по высоте, независимо от длины контента, которое они содержат. Доминирующий метод размещения в то время – float — не справлялся с этой проблемой. Решение Flexbox Когда на сцену ...

Читать далее »

Flexbox и абсолютное позиционирование

От автора: недавно я пытался создать приложение с открытым исходным кодом для видеоконференций специально для онлайн-встреч. Кажется, как и любой другой разработчик на планете. Приложения для видеоконференций — это новые чат-боты. Может быть. Это также было хорошей причиной для того, чтобы лучше познакомиться с OpenTok, так как ранее у меня не было сценария использования для него. Я, вероятно, опишу весь ...

Читать далее »