How to set order of the flexible items inside the division element in CSS?

CSSWeb DevelopmentFront End Technology

Sorting and arranging data in an organised manner in a web page is a cumbersome task for the developers because you need place them in correct order while keeping the web page look attractive and responsive. Putting each block of data inside a div element and then modifying its position and size is quite inconvenient and monotonous. Also, it is hectic task to align them together according to your preferences.

Instead, you could just put them in different boxes and then combine them in a big container. In the recent decade, the problem has been solved using the above technique. CSS flexbox and Grid method enables the developers to sort and represent our data in much assembled and responsive manner.

In this article, we will discuss about CSS flexbox. We will also see how to sort the data as different flexible items in a flexbox.

Let’s see about the CSS flexbox.

CSS Flexbox

A CSS Flexbox is a container which contains several flex items in it. You can align the flex items into rows or columns accord


In the above picture, the yellow box is the flex container while the blue boxes are the flex items. The flex items are aligned in a row.

Syntax

element{
   display: flex;
}

Example

<!DOCTYPE html> <html> <head> <title> CSS Flexbox </title> <style> section{ display: flex; background-color: green; flex-direction: column; width: 20%; } div{ background-color: yellow; margin: 10px; height: 60px; width: 100px; text-align: center; color: black; } </style> </head> <body> <section> <div> 1 </div> <div> 2 </div> <div> 3 </div> </section> </body> </html>

display − flex enables the developers to make each element look proper and attractive. It aligns the children in the element into rows or columns.

The flex container properties are as follows −

  • Flex-direction − it tells the direction in which the container stacks the flex items. Values – column, column-reverse, row, row-reverse

  • Flex-wrap − it tells if you want to wrap the flex items or not. Values – wrap, nowrap

  • Flex-flow − it sets both the flex direction and flex wrap. Values – row wrap, column nowrap etc.,

  • Align-items − alignment of the flex items Values – center, flex-start, flex-end, space-around etc.,

  • Flex-basis − it sets the size of flex items. Values- it can be length (cm, px, em) or percent.

  • Justify-content − also used for alignment of the flex items. Values- same as that of align-items

  • Flex-shrink − it takes numbers as values. If one item has its value 3, then it will shrink three times as much as the one with value 1.

  • Order − it specifies the order in which flex items should be aligned.

Order property of Flex container

To set the order of flexible items in a div element, we will use the order property and set the order of the items.

Syntax

order: number;

Example

First, let’s have a look at the flex items when we don’t apply the order property.

<!DOCTYPE html> <html> <head> <title> Order of Flex items </title> <style> .flex-container{ display: flex; background-color: green; flex-direction: row; flex-wrap: nowrap; align-items: center; width: 50%; } .items{ background-color: yellow; margin: 10px; height: 50px; width: 250px; text-align: center; color: black; } </style> </head> <body> <h1> Order of Flex Items</h1> <h2> Given below are flex items which are not arranged orderly: </h2> <div class="flex-container"> <div class= "items"> This </div> <div class= "items"> example </div> <div class= "items"> is </div> <div class= "items"> an </div> </div> </body> </html>

The div element contains a sentence. However, the sentence is jumbled. It is displayed “This example is an “.

Example

We want to display “This is an example”. For doing so the following code can be written

<!DOCTYPE html> <html> <head> <title> Order of Flex items </title> <style> .flex-container{ display: flex; background-color: green; flex-direction: row; flex-wrap: nowrap; align-items: center; width: 50%; } .item1, .item2, .item3, .item4{ background-color: yellow; margin: 5px; height: 60px; width: 250px; text-align: center; color: black; padding: 15px; font-size: 20px; font-weight: 900; justify-content: center; } .item1{ order: 1; } .item2{ order: 4; } .item3{ order: 2; } .item4{ order: 3; } </style> </head> <body> <h1> Order of Flex Items</h1> <h2> Given below are flex items which are arranged orderly after applying the order property: </h2> <div class="flex-container"> <div class= "item1"> This </div> <div class= "item2"> example </div> <div class= "item3"> is </div> <div class= "item4"> an </div> </div> </body> </html>

The correct statement “This is an example” is displayed.

Let’s checkout another method for doing the same task.

Using CSS Grid

The order of the flexible items can also be set using CSS grid inside the div element. For this, we need to use display:grid.

Each word of the sentence in the above example can be placed in a grid container and then we can set its order accordingly.

Example

<!DOCTYPE html> <html> <head> <title> Order of Flexible items </title> <style> .grid-container{ display: grid; background-color: green; grid-template-columns: 15% 15% 15% 15%; grid-column-gap: 4px; align-items: center; width: 80%; } .item1, .item2, .item3, .item4{ background-color: yellow; margin: 10px; height: 20px; width: 70px; text-align: center; color: black; padding: 10px; font-size: 20px; font-weight: 900; justify-content: center; } .item1{ order: 1; } .item2{ order: 4; } .item3{ order: 2; } .item4{ order: 3; } </style> </head> <body> <h1> Order of Flexible Items</h1> <h2> Given below are flexible items which are arranged orderly after applying the order property: </h2> <div class="grid-container"> <div class= "item1"> This </div> <div class= "item2"> example </div> <div class= "item3"> is </div> <div class= "item4"> an </div> </div> </body> </html>

Conclusion

In this article, we have learnt about how to set the order of flexible items inside a div element (container) using two CSS Flexbox and Grid.

raja
Updated on 11-Oct-2022 14:51:58

Advertisements