Category: Flexbox

11
Окт
2021

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

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

29
Сен
2021

Как расширять дочерние элементы flex до полной ширины при наведении курсора

В приведенном ниже примере можно ли расширить дочерние элементы flex на всю ширину при наведении курсора только с помощью css, или я должен сделать это с помощью javascript?
Примечание. В этом сценарии важно использовать flexbox. и если ег…

25
Авг
2021

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

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

18
Май
2021

Задание межэлементного пространства во flexbox

Есть сайт – https://www.figma.com/file/noqP1gzhrAlGAErPNBgknp/test?node-id=0%3A1 (tablet версия). Как задать межэлементное пространство между LOGO COMPANY и двумя квадратиками в футере с учетом того, что LOGO COMPANY И 2 квадратика находят…

03
Апр
2021

Как реализовать плавное заполнение ползунка input range с фиксацией на заданных метках диапазона?

Есть временная шкала input[type="range"] с ползунком и метками на 4,6,12 месяцев.
У меня не получается сделать так, чтобы можно было плавно тянуть за кругляш по всей длине ползунка, но чтобы он мог фиксироваться только на заданны…

28
Фев
2021

Как присвоить высоту одного элемента к другим элементам на чистом JS?

Как мне через vanilla js получить высоту самого высокого элемента слайдера и присвоить его к остальным, чтобы по итогу была одна высота для всех?
На сайте использовался swiper-слайдер, при добавлении в него картинок разного размера они рас…

14
Янв
2021

Прокрутка для KendoGrid при flexbox вёрстке

Есть виджет от Кендо, но вопрос больше про вёрстку: мне надо сделать так, чтобы KendoGrid или KendoTreeList заняли бы всю область дива, в котором они расположены, но не больше экрана и была бы именно прокрутка виджета. Сейчас же у меня (ко…

12
Янв
2021

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

От автора: когда вы применяете свойство CSS к элементу, происходит множество вещей, невидимых на первый взгляд. Например, допустим, у нас есть такой HTML: [crayon-5ffd568eb6235798115921/] А потом мы пишем CSS … [crayon-5ffd568eb623b232158236/] Технически это не один стиль, который мы применяем, когда пишем одну строку CSS выше. Фактически, здесь к элементам .child будет применен целый набор свойств, […]

07
Янв
2021

Адаптивная таблица с HTML-тегами в ячейках

1. Желаемое поведение
Положим, имеется такая таблица:

Хотелось бы, чтобы на устройствах с небольшой шириной экрана она выглядела следующим образом:

То есть слева — thead, справа — tbody.
я не знаю, как можно получить желаемое поведение, …

05
Окт
2020

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

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

08
Сен
2020

Можно ли flex-блокам задать высотку самого невысокого элемента

Допустим есть 4 блока и в каждом по картинке: в первых 3 маленькой высоты и в 4 побольше.

Можно ли задать блокам высоту, равную минимальной среди них? Т.е. чтобы последняя картинка уменьшилась до высоты минимальной.

02
Сен
2020

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

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

13
Авг
2020

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

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

18
Июн
2020

FlexboxLayout | Android

Недавно узнал про FlexboxLayout. Добавил туда элементы (программно). Возникла проблема, у элементов нет отступов, хоть я их и прописывал. Что делать?
ViewGroup.MarginLayoutParams margin = (ViewGroup.MarginLayoutParams)element.getLayoutPara…

07
Май
2020

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

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

04
Май
2020

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

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

24
Апр
2020

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

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

10
Апр
2020

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

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

25
Мар
2020

Как создать липкий футер с помощью flexbox

От автора: создание липкого футера является одной из самых распространенных задач веб-разработки, которую вы легко можете решить с помощью flexbox. Без липкого футера, если у вас недостаточно содержимого на странице, футер «подпрыгивает» до середины экрана, что может полностью испортить взаимодействие с пользователем. До появления flexbox разработчики использовали отрицательные поля, чтобы заставить нижний колонтитул опускаться до […]

13
Мар
2020

вывод многомерного массива в html по 4 товара в строку через js

Как правильно вывести 4 товара в строку, затем еще ниже 4 по средством js? из предыдущего задания есть код таблицы

https://jsfiddle.net/novikov433/yhdr1nvk/

нужно сделать все тоже самое, но по аналогии с уроком https://www.youtube.com/w…

08
Фев
2020

Почему получается segmentation fault у программы на yacc?

Я пытаюсь запустить пример(4.3. Обрабатываем конфигурационный файл) из этого HOW-TO.
Это код, который подан вход как язык L1:

zone “.” {
type hint;
file “/etc/bind/db.root”;
};

Это исходники, с которыми я работаю:

LEX-ф…

27
Янв
2020

2 способа создать макет Святого Грааля с Flexbox

От автора: до появления Модуля макетов flexbox было непросто создать макет Святого Грааля. Нам приходилось использовать всевозможные настройки, чтобы добиться такого вида макета, который понравился бы как маркетологам, так и владельцам веб-сайтов, чтобы он позволял использовать две боковые панели одновременно — одну слева и одну справа. Благодаря flexbox, теперь мы можем создать его всего с […]

25
Дек
2019

Соображения в основе макета Flexbox

От автора: мне просто нужно разместить два блока рядом, и я слышу, что flexbox хорош в таких вещах.   Просто добавление display: flex; к родительскому элементу укладывает его потомком в ряд Ну, это круто. Полагаю, я мог использовать float, но это проще. Они, вероятно, должны занять все доступное пространство. Могу ли я просто растянуть родителя […]

16
Авг
2019

Естественно адаптивная сетка CSS с помощью minmax() и min()

От автора: CSS Grid в настоящее время широко поддерживается в современных браузерах, и многие люди отлично пользуются этим! Но, к сожалению, одна из самых полезных функций спецификации не работает так, как заявляется. В частности, невозможно создать «естественно адаптивную сетку» CSS, то есть сетку, которая реагирует на размер своего контейнера без использования медиазапросов. Но благодаря определенным […]

13
Авг
2019

Как добавить резервный Flexbox вариант для CSS Grid

От автора: в предыдущей статье я рассказал о том, как с помощью CSS Grid создать календарь. Сегодня я хочу поделиться тем, как создать для CSS Grid резервный Flexbox вариант для того же календаря. Как обеспечить поддержку В целом, есть три способа обеспечить поддержку, когда дело доходит до CSS. Первый способ: написать резервный код. Переопределить резервный […]

12
Авг
2019

Flexbox и отступы: примеры работы

От автора: это очень короткий вопрос об использовании отступов в контексте Flexbox форматирования, который мы обсудили с моим другом Вей. Но я думаю, что это довольно распространенная проблема, с которой люди могут столкнуться, так что вот общий обзор. Сценарий Если вы попытались применить отступы к Flexbox-контейнеру с горизонтальным переполнением при прокрутке, вы можете заметить, что […]

31
Июл
2019

Flexbox justify-content: полное руководство по центрированию

От автора: Flexbox — это популярный модуль макета CSS, который помогает позиционировать элементы HTML на экране. Есть много сценариев использования, когда он может оказаться настоящей находкой; горизонтальное и вертикальное центрирование из их числа. Центрирование Flexbox justify-content решает стандартные проблемы выравнивания, с которыми вы можете столкнуться при работе с традиционной блочной моделью CSS. Это позволяет центрировать […]

29
Май
2019

Перенос на новую строку с помощью flexbox

От автора: вот проблема: если вы хотите создать макет с несколькими строками элементов, как вы можете контролировать во flexbox перенос элементов на новую строку? Предположим, вы хотите создать макет, который выглядит примерно так, с чередующимися строками из трех элементов и одним элементом на всю ширину: Распространенным способом управления позиционированием и размером flex-элементов является использование width […]

17
Май
2019

Вам просто нужно знать эти свойства, чтобы полюбить CSS

От автора: позиционирование CSS и HTML может быть настоящей головной болью, когда вы новичок в разработке веб-интерфейса. Но в этом посте я собираюсь научить вас тому, как решить большинство проблем позиционирования. Вам нужно знать только эти 3 свойства CSS. Я разработчик с более чем 3-летним опытом работы. Когда я учился, я думал то же, что […]