Register to Better Coder! It's free.
Enjoy the premium features and succeed at every job interview.

How can you explicitly reorder items in a flexbox container?

Experience Level: Junior
Tags: CSSFlexbox

Answer

The default order of the flex items is defined by their physical position in the flex container HTML element. To reorder the flex items, you can set for each of them the style order: <some_number>. The items are then sorted by the number from the lowest to the greatest.

The following code will make the flex items display in the order A-B-C.

CSS

.container {
  display: flex;
  flex-direction: row;
}

.a {
  order: 1;
}

.b {
  order: 10;
}

.c {
  order: -10;
}

HTML

<div class="container">
  <div class="a">Two</div>
  <div class="b">Three</div>
  <div class="c">One</div>
</div>

Comments

No Comments Yet.
Be the first to tell us what you think.
Flexbox
Flexbox

Are you learning Flexbox ? Try our test we designed to help you progress faster.

Test yourself
25 Flexbox questions that will help you to nail your job interview
25 Flexbox questions that will help you to nail your job interview

Are you learning Flexbox ? Try our test we designed to help you progress faster.

Test yourself