Category: 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-летним опытом работы. Когда я учился, я думал то же, что […]

03
Май
2019

CSS masonry с помощью flexbox, :nth-child() и order

От автора: на первый взгляд создать макет masonry с помощью flexbox довольно просто; все, что вам нужно сделать, это установить для flex-flow — column wrap, и вуаля, у вас есть макет masonry. Что-то вроде того. Проблема этого подхода заключается в том, что он создает сетку с визуально перетасованным и непонятным порядком. Элементы будут (без ведома […]

28
Фев
2019

В чем разница между Flexbox и Grid CSS?

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

18
Фев
2019

Полное руководство по свойствам размеров Flexbox

От автора: изменение размеров Flexbox позволяет создавать гибкие макеты, которые полностью адаптируются к экрану. Если вы все настроите правильно, вам не придется полагаться на медиа-запросы для поддержки разных экранов, окон просмотра и ориентаций. В этом руководстве я покажу вам, как использовать свойства Flexbox для изменения размеров: flex-grow, flex-shrink, flex-basis и flex. Заполнение свободного пространства Одним […]