Публикации по теме 'flexbox'


Как сделать сетку изображений в React Native
Один из моих первых проектов, созданных на React Native, нуждался в сетке изображений. У меня не было такого опыта работы с React Native, как сегодня, поэтому эта задача была сложной и очень запутанной. Как раз тогда, когда я думал, что понял, возникли новые проблемы. Проблемы Адаптивный размер изображений, чтобы они занимали 1/3 экрана на всех размерах устройств. Отрисовка списка изображений неизвестной длины Определение того, какое изображение было нажато Начало работы..

Оберните свои компоненты React Native
Примечание: этот пост старый. Я не думаю, что все же сказал бы, что «перенос» текстовых компонентов - лучшая практика. Вместо этого я определил полдюжины стилей шрифтов, которые использовал, в отдельном файле, который можно импортировать и при необходимости распространить в определения стиля (или эмоции). Можно подумать, что, поскольку основные компоненты React Native являются классами, их следует расширять. Но, как заявил Дэн Абрамов, это не такая уж и хорошая идея. Вы можете..

Вопросы по теме 'flexbox'

CSS3 Flexbox полноразмерное приложение и переполнение
У меня есть приложение, в котором используется классический макет электронной почты, как показано ниже. Я построил его с использованием новой модели Flexbox CSS3, и он работает блестяще, пока я не добавлю пользователю возможность динамически...
21641 просмотров
schedule 16.10.2021

Возможна ли растяжка HTML5 Flexbox по обеим осям?
У меня есть div flexbox, который позволяет ОДИН дочерний элемент. До сих пор мне удавалось добиться правильного выравнивания ребенка (сверху, слева, справа, снизу и т. Д.), Включая вертикальное растяжение. Я также хочу иметь возможность поддерживать...
4035 просмотров
schedule 17.11.2021

Как написать этот стиль в последней реализации CSS3 Flexbox
Я понял, как достичь стиля с реализацией flexbox 2009 года, но есть еще две реализации. Недолговечный синтаксис 2011 года и часть синтаксиса 2012 года, а затем текущий и окончательный синтаксис. Как я могу написать этот код в текущей и...
422 просмотров
schedule 03.11.2021

Адаптивные изображения во вложенных гибких боксах выходят за пределы своих родителей?
У меня довольно сложный макет flexbox (многоуровневый). Кажется, все работает нормально, пока я не добавлю несколько адаптивных изображений во флексбоксы. Я заметил, что родительский элемент не расширяется по вертикали, чтобы учесть высоту...
1678 просмотров
schedule 24.10.2021

iOS - Плавающий курсор с элементами ввода внутри flexbox
Кто-нибудь решал проблему с плавающим курсором с элементами ввода, которые находятся внутри макетов flexbox в приложениях HTML на iOS7? Перейдите на страницу...
1595 просмотров
schedule 06.10.2021

Невозможно установить ширину дочернего элемента flexbox на 100%
Я изучаю CSS flexbox и делаю простой макет, в котором я хотел, чтобы первый дочерний элемент flex отображался со 100% шириной родительского элемента и остальные элементы гибкости, обертываемые ниже. Кроме того, обернутые элементы гибкости должны...
9683 просмотров
schedule 08.11.2021

CSS flex column-reverse игнорирует ширину таблицы
«ширина таблицы 100%» и «td width xx%» не работают с «tbody column-reverse». Подсказка? Желательна фиксированная относительная ширина для каждой ячейки в таблице 100% ширины. Только CSS, пожалуйста. jsfiddle body { margin:0px; } table...
766 просмотров
schedule 12.09.2021

Как создать элемент поверх макета со 100% высотой, может быть, flexbox?
У меня есть хитрый макет, с которым я могу помочь. Вот как это выглядит: Есть заголовок и другой контент, и я хочу, чтобы эти вертикальные полосы с правой стороны были поверх всего остального. Их элемент-оболочка должен быть на 100% по...
641 просмотров
schedule 22.10.2021

CSS flex box делает второй элемент центрированным
У меня простой макет, в котором мне нужен h3 с левой стороны и навигация с правой стороны, но в центре, я хочу сделать это с помощью гибкого блока, но я не знаю, как сделать так, чтобы навигация была центрирована справа. В обычной сетке это было...
1786 просмотров
schedule 07.09.2021

Случайное изображение при загрузке страницы в качестве фона Jumbotron
Я пытаюсь получить следующий код для загрузки случайного изображения для фона jumbotron безуспешно. Я просто не могу сказать, в какой части проблемы. Сам jumbotron действует как область для основного гибкого слайдера. Я в основном хочу, чтобы...
635 просмотров
schedule 19.09.2021

Как вложить полимерные макеты, чтобы заполнить всю страницу?
Я пытаюсь использовать макеты полимеров в полимерных элементах, но не могу определить, как они должны быть правильно вложены. Я использую body на fullbleed - это работает правильно (серая область в примере). Затем я добавляю полимерный элемент...
1634 просмотров
schedule 18.09.2021

Modernizr: IE10 и Flexbox: как обнаружить IE10 flexbox
Я использую Modernizr v3 на своем веб-сайте для проверки поддержки Flexbox. Modernizr добавляет "flexbox" класс тела для браузеров, которые его поддерживают, и "no-flexbox" для браузеров, которые его не поддерживают. Поскольку браузеры, не...
2445 просмотров
schedule 20.09.2021

Флекс-направление в сафари 5
Итак, я пытаюсь использовать flexbox, но мне было указано, что он не работает на iPhone или в Safari для Windows. После расследования мне удалось обнаружить, что не работает гибкое направление. .flex-columns { display: -webkit-box; /*...
4205 просмотров
schedule 23.10.2021

Как добиться чего-то вроде контейнеров или сетки в Polymer Project 1.0 - как?
Я хотел бы создать отзывчивый веб-сайт с помощью Polymer Starter Kit + готовые полимерные элементы. Теперь, как добиться чего-то вроде контейнера или сетки, как в фреймворке css, таком как bootstrap? Возможно ли это только с помощью Polymer, или...
4537 просмотров

Держите средний предмет по центру, если боковые предметы имеют разную ширину
Представьте себе следующий макет, где точки представляют собой пространство между полями: [Left box]......[Center box]......[Right box] Когда я удаляю правый прямоугольник, мне нравится, что центральный прямоугольник все еще находится...
80530 просмотров
schedule 21.11.2021

Использование flexbox с компонентами angular 2
Я хочу обновить визуальную сторону (сетку, цвета) моего приложения angular 2. Старый макет был построен с помощью bootstrap 4, который мне больше не нужен. Я решил использовать простой css3 и построить сетку с помощью flexbox. Я сделал...
12901 просмотров
schedule 05.10.2021

Внутренний flexbox 100% высота родительского div
Это мой тонкий и дерзкий код. Мне нужно сделать высоту гибкого контейнера или гибкого элемента на 100% родительского div (flex-primary-content). Вы можете посмотреть, как это выглядит сейчас в коде: http://codepen.io/gmrash/pen/MazyaP (требуемый...
2588 просмотров
schedule 03.12.2021

Почему в flexbox ширина обрабатывается по-разному?
В последнее время я экспериментировал с display:flex , так как вижу, что он становится все более популярным. В ходе быстрого тестирования с использованием гибких и негибких подходов CSS я понял, что моя ширина и поля всегда учитываются при...
1216 просмотров
schedule 20.11.2021

Flexbox работает в таблице в Chrome, но не в Mozilla
У меня есть эта таблица с некоторым содержимым, отображаемым с помощью flexbox, который отлично работает в Chrome, но не в Mozilla. Дело в том, что если я вынесу контент из таблицы, он работает, но не внутри. Когда вы изменяете размер, похоже, что...
214 просмотров
schedule 19.09.2021

Переполнение триггера для дочернего элемента при переполнении родительского элемента
У меня есть куча display: inline-block; div внутри display: flex; родительского div. Когда окно становится слишком маленьким, родительский div выходит за пределы строки и появляется горизонтальная полоса прокрутки. Один из inline-block div...
164 просмотров
schedule 10.10.2021