Гибкий внутренний порядок упаковки дочерних элементов
Если у меня есть такие элементы, как следующие, сначала будут перенесены дочерние элементы контейнера div. Я хотел бы, чтобы дочерние элементы элементов div сначала были обернуты. Можно ли контролировать порядок упаковки?
<div id = "container" style = "display: flex; flex-wrap: wrap">
<div id = "title">titletitletitletitle</div>
<div id = "items" style = "display: flex; flex-wrap: wrap">
<div>AAAAAAAAAAAAA</div>
<div>BBBBBBBBBBBBB</div>
<div>CCCCCCCCCCCCC</div>
</div>
</div>
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
1
52
2
Ответы 2
Если я правильно понял, вы ожидаете, что сначала будет обернуто содержимое вспомогательного контейнера.
Если установить: flex:1; для этого контейнера, его содержимое будет сначала обернуто, пока обернутое содержимое не займет слишком большую ширину.
<div id = "container" style = "display:flex; flex-direction:row;flex-wrap: wrap">
<div id = "title">titletitletitletitle</div>
<div id = "items" style = "display:flex; flex-direction:row;flex-wrap: wrap; flex:1;">
<div>AAAAAAAAAAAAAAAAAAAAAAAAAA</div>
<div>BBBBBBBBBBBBBBBBBBBBBBBBBB</div>
<div>CCCCCCCCCCCCCCCCCCCCCCCC</div>
</div>
</div>Вы можете просто установить flex-wrap: nowrap в контейнер div.
<div id = "container" style = "display:flex; flex-direction:row; flex-wrap: nowrap">
<div id = "title">titletitletitletitle * </div>
<div id = "items" style = "display:flex; flex-direction: row; flex-wrap: wrap; justify-content:space-evenly;">
<div>AAAAAAAAAAAAA * </div>
<div>BBBB BBBBBBBBB * </div>
<div>CCCCCCCCCCCCC * </div>
<div>BB BBBBBBBBBBB * </div>
<div>CCCCCCCCC CCCC * </div>
<div>BBBBBBBBBBBBB * </div>
<div>CCCCCCCC CCCCC * </div>
</div>
</div>Другие вопросы по теме
Управляйте высотой гибкого элемента в гибкой сетке, не затрагивая окружающие элементы
Как сделать так, чтобы div с фиксированной позицией наследовал ширину родительского элемента гибкого размера?
Лучший способ расставить гибкие элементы
Создайте макет гибкой сетки с 3 столбцами и 2 строками с первым элементом, охватывающим обе строки
Макет сетки с помощью flexbox
Пузырь чата в React Native
Разница в переполнении между Chrome и Edge
Выравнивание гибкости дисплея неверно в Chrome, Safari и Edge, но исправлено в Firefox
Flex-direction: столбец в сафари
Могу ли я вертикально центрировать тело, используя гибкость со 100% высотой вместо 100vh?
Похожие вопросы
Какой HTML или CSS мне нужно написать, чтобы текст атрибута-заполнителя можно было выбирать / выделять с помощью мыши?
Управляйте высотой гибкого элемента в гибкой сетке, не затрагивая окружающие элементы
Начертание шрифта загружает не все шрифты
Непреднамеренное переполнение на сайте
Получить размер встроенного iframe
Нажатие кнопки не работает, когда в текстовой области есть содержимое и открыта клавиатура
Выделите текущую вкладку навигации на основе URL-адреса или подкаталога
Переопределение CSS для мобильных устройств
Input type = "number" работает неправильно в firefox
Убрать перекрытия с изображений и растянуть подпись под изображением по столбцам
Да, с медиа-запросом: jsfiddle.net/pkz4n34q