css Question posted in
Some basic documentation can be found here.

How can I reverse all the elements of a flexbox in CSS?

I’m trying to sort elements of a flexbox from the last to the first.

I tried using flex-direction: row-reverse; but it only reverses the lines, not the whole container.

The result:

the result

It sorts like 3-2-1-(…)-9-8-7, what I want is 9-8-7-(…)-3-2-1*

How can I reverse all elements?

.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>
Tags:

2

Answers


  1. 0

    Your element width is large, so it’s wrapped.

    For multi rows, consider using the flex-wrap attribute.

    add this line

    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>
    Login or Signup to reply.
  2. 0

    Just use flex-wrap: wrap-reverse
    See the docs: 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search