Как я могу перевернуть все элементы флексбокса в CSS?

Я пытаюсь отсортировать элементы флексбокса от последнего к первому.

Я пробовал использовать flex-direction: row-reverse;, но он меняет местами только строки, а не весь контейнер.

Результат:

Это что-то вроде 3-2-1-(...)-9-8-7, мне нужно 9-8-7-(...)-3-2-1*

Как я могу перевернуть все элементы?

.container {
  display: flex;
  flex-wrap: wrap;
  height: 10rem;
  flex-direction: row-reverse;
}

.container .item {
  height: 30%;
  width: 30%
}

<div class = "container">
  <div class = "item">1</div>
  <div class = "item">2</div>
  <div class = "item">3</div>
  <div class = "item">4</div>
  <div class = "item">5</div>
  <div class = "item">6</div>
</div>

css flexbox direction

04.09.2024 10:14

Приемы 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 сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ширина вашего элемента большая, поэтому он обернут.

Для нескольких строк рассмотрите возможность использования атрибута flex-wrap.

добавьте эту строку

flex-wrap: wrap-reverse;

.container {
    display: flex;
    flex-wrap: wrap;
    height: 10rem;
    flex-direction: row-reverse;
    flex-wrap:wrap-reverse;
}

.container .item {
    height: 30%;
    width: 30%
}

<div class = "container">
    <div class = "item">1</div>
    <div class = "item">2</div>
    <div class = "item">3</div>
    <div class = "item">4</div>
    <div class = "item">5</div>
    <div class = "item">6</div>
    <div class = "item">7</div>
    <div class = "item">8</div>
    <div class = "item">9</div>
</div>

04.09.2024 10:35

Ответ принят как подходящий

Просто используйте flex-wrap: wrap-reverse См. документацию: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap

.container {
  display: flex;
  flex-wrap: wrap-reverse;
  height: 10rem;
  flex-direction: row-reverse;
}

.container .item {
  height: 30%;
  width: 30%
}

<div class = "container">
  <div class = "item">1</div>
  <div class = "item">2</div>
  <div class = "item">3</div>
  <div class = "item">4</div>
  <div class = "item">5</div>
  <div class = "item">6</div>
</div>

04.09.2024 10:36

Другие вопросы по теме

Как заставить расположенные рядом элементы div в гибком контейнере обертывать свое содержимое перед тем, как обернуть себя

Мои гибкие коробки неправильно выравниваются или перекрываются

4 элемента в строке, но с пустым местом, если элементов меньше 4?

Как центрировать содержимое навигации и обеспечить растягивание фона на всю ширину на больших экранах?

CSS Flexbox с компонентом, возвращающим TopBar и SideBar, и еще одним, возвращающим основной контент

Как синхронизировать наложенное изображение с основной формой круга?

Как я могу разделить содержимое <a> и <nav> в <header> моего HTML на левое и правое в одном родительском блоке с помощью CSS?

Проблема с размещением значка меню на странице мобильной версии

Проблема с макетом Flexbox: элементы не отображаются правильно в строках

Как центрировать горизонтальную линию по вертикали до первой строки многострочного абзаца с помощью CSS?

Как я могу перевернуть все элементы флексбокса в CSS?

Ответы 2

Другие вопросы по теме

Похожие вопросы