[CSS] How to change the order of flex items with order?

Flexbox, useful for aligning elements side by side.

You can change the order of flex items in a row using the CSS order property.

I would like to understand exactly what to specify and how to replace it.

This time, for those who want to know how to change the order of flex items using CSS order

I will explain according to the above items.

After reading this article, you will be able to set the order of flex items with CSS order .

What is an order? What do you use when?

A flexbox consists of a flex container and multiple flex items inside it.

Flex items are basically arranged in the order in which they are written.

You can change this order using the CSS order .

Specifically, it is described as follows.

.flex-item {
  order: 3;
}

A number is written in the value. Note that this value does not mean third in line.

Flex items are sorted in ascending order. By increasing the number, it can be placed behind.

You can also specify a negative number for the value, and use a negative value when you want to bring a specific item to the top.

The initial value of order is 0, so if it is negative, it will appear at the beginning.

Usage example of order

We will actually create a flexbox and explain how it changes by specifying the CSS order .

<div class="flex-container">
<div class="flex-item item1">アイテム1</div>
<div class="flex-item item2">アイテム2</div>
<div class="flex-item item3">アイテム3</div>
<div class="flex-item item4">アイテム4</div>
<div class="flex-item item5">アイテム5</div>
</div>

.flex-container {
  display: flex;
  flex-wrap: wrap; 
  border: solid 3px #ccc;
}
.flex-item {
  width: 100px;
  height: 100px;
  background: skyblue;
  margin: 5px;
  text-align: center;
  line-height: 100px;
}

I made a basic flexbox. Containers and items are decorated for easy viewing.

In this state, the items are arranged in order from left to right.

Add the following CSS here:

.item2 {
  order: 3;
}
.item5 {
  order: -1;
}

Can you confirm that the order of the items has changed?

Item 5 is now at the top and Item 2 is at the end.

Since nothing is specified for 1, 3, and 4, it will be “order: 0”. Smaller numbers move to the left, and larger numbers move to the right.

Please change the numerical value and try various things.

Precautions when using

CSS order is a useful property that allows you to change the order of your flex items, but you have to be careful.

Although the visual order changes, it does not affect the DOM tree (hierarchical structure of elements), so the reading order of visual support tools such as screen readers does not change.

Avoid using this property for items whose order is important .

Summary: In CSS order, the smaller the number, the earlier it comes

In this article, I have explained how to use CSS order and what to watch out for.

Also keep in mind that the lower the number, the lower the order, and the number does not directly indicate the order .