Ordering Flex Items

In this post I going to show you how to create Ordering Flex Items. We will try it by style. we will take a look at ways in which you can change the visual order of your content when using Flexbox.

Straight the display of the items

The first two values ​​keep the items in the same order and display the sequentially from the start line.

<!DOCTYPE html>
<html lang="en">

<head>
	<title>Web</title>

<style>
		.container {
			display: flex;
			border: 2px solid black;
			width: 600px;
			height: 38px;
			flex-direction: row;
		}
		
	  .item1 {
		padding: 2px;
		background-color: gold;
		width: 30px;
		height: 30px;
		border: 2px solid green;
	}

	 .item2 {
		padding: 2px;
		background-color: gold;
		width: 30px;
		height: 30px;
		border: 2px solid green;
	}
	  .item3 {
		padding: 2px;
		background-color: gold;
		width: 30px;
		height: 30px;
		border: 2px solid green;
	}

	.item4 {
		padding: 2px;
		background-color: gold;
		width: 30px;
		height: 30px;
		border: 2px solid green;
	}

	 .item5 {
		padding: 2px;
		background-color: gold;
		width: 30px;
		height: 30px;
		border: 2px solid green;
	}


	</style>

</head>
<body>

	<div class="container">
		<div class="item1">
			<a href="#">one</a>
		</div>
		<div class="item2">
			<a href="#">two</a>
		</div>
		<div class="item3">
			<a href="#">three</a>
		</div>
		<div class="item4">
			<a href="#">four</a>
		</div>
		<div class="item5">
			<a href="#">five</a>
		</div>
	</div>

</body>
</html>

The above code should look like this Image below in your preferred browser.

Ordering Flex Items in html

Reverse the display of the items

The second two values ​​reverse the items by switching the start and end lines.

We can reverse the image using row-reverse in flex-direction.

<!DOCTYPE html>
<html lang="en">

<head>
	<title>Web</title>

<style>
		.container {
			display: flex;
			border: 2px solid black;
			width: 600px;
			height: 38px;
			flex-direction: row-reverse;
		}
		
	  .item1 {
		padding: 2px;
		background-color: gold;
		width: 30px;
		height: 30px;
		border: 2px solid green;
	}

	 .item2 {
		padding: 2px;
		background-color: gold;
		width: 30px;
		height: 30px;
		border: 2px solid green;
	}
	  .item3 {
		padding: 2px;
		background-color: gold;
		width: 30px;
		height: 30px;
		border: 2px solid green;
	}

	.item4 {
		padding: 2px;
		background-color: gold;
		width: 30px;
		height: 30px;
		border: 2px solid green;
	}

	 .item5 {
		padding: 2px;
		background-color: gold;
		width: 30px;
		height: 30px;
		border: 2px solid green;
	}


	</style>

</head>
<body>

	<div class="container">
		<div class="item1">
			<a href="#">one</a>
		</div>
		<div class="item2">
			<a href="#">two</a>
		</div>
		<div class="item3">
			<a href="#">three</a>
		</div>
		<div class="item4">
			<a href="#">four</a>
		</div>
		<div class="item5">
			<a href="#">five</a>
		</div>
	</div>

</body>
</html>


The above code should look like this Image below in your preferred browser.

Ordering Flex Items.html

The order property

You can also use negative values with order, which can be quite useful. If you want to make one item display first, and leave the order of all other items unchanged, you can give that item an order of -1. As this is lower than 0 the item will always be displayed first.

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Web</title>
<style>
		.container {
			display: flex;
			border: 3px solid black;
			width: 500px;
			height: 80px;
			flex-wrap: wrap;
		}

		 .active {
            order: -1;
            flex: 1 0 100%;
            padding: 3px;
            max-width: -webkit-fill-available;

        }   
		

	  .item1 {
		padding: 2px;
		background-color: gold;
		width: 30px;
		height: 30px;
		border: 2px solid green;
	}

	 .item2 {
		padding: 2px;
		background-color: gold;
		width: 30px;
		height: 30px;
		border: 2px solid green;
	}
	  .active {
		padding: 2px;
		background-color: gold;
		width: 10px;
		height: 30px;
		border: 2px solid green;
	}

	.item4 {
		padding: 2px;
		background-color: gold;
		width: 30px;
		height: 30px;
		border: 2px solid green;
	}

	 .item5 {
		padding: 2px;
		background-color: gold;
		width: 30px;
		height: 30px;
		border: 2px solid green;
	}


	</style>

</head>
<body>

	<div class="container">
		<div class="item1">
			<a href="#">1</a>
		</div>
		<div class="item2">
			<a href="#">2</a>
		</div>
		
		 <div class="active"><a href="#">3</a></div>
		
		
		<div class="item4">
			<a href="#">4</a>
		</div>
		<div class="item5">
			<a href="#">5</a>
		</div>
	</div>

</body>
</html>


The above code should look like this Image below in your preferred browser.

The order property.html

Use cases for order

The card is going to be our flex container, with flex-direction set to column. I then give the date an order of -1. This pulls it up above the heading

<!DOCTYPE html>
<html lang="en">
<head>

	<title>WEB</title>
	<style>
		
		 .card {
            display: flex;
            flex-direction: column;
          }

        .date {
                order: -1;
                text-align: right;
                 font-size: x-large;
              
            }

            p,h3 {
              font-size: x-large;
          } 

         
         .container {
             display: -webkit-inline-box;
             border: 1px solid black;
			 width: 660px;
			 height: 230px;
         }

	    .card1 {
             background-color: mediumturquoise;
             color: black;
             height: 190px;
             width: 300px;
             margin: 10px;
             border: 2px solid lightslategray;

           }

       .card2 {
       	    background-color: mediumturquoise;
            color: black;
            height: 190px;
            width: 300px;
            margin: 10px;
            border: 2px solid lightslategray;
       }
       

		
	</style>
</head>
<body>

	     <div class="container">

	     	<div class="card1">
            <div class="card">
                <h3>News item title</h3>
                <div class="date">1 Nov 2017</div>
                <p>This is the content of my news item. Very newsworthy.</p>
            </div>
            </div>

            <div class="card2">
            <div class="card">
                <h3>Another title</h3>
                <div class="date">6 Nov 2017</div>
                <p>This is the content of my news item. Very newsworthy.</p>
            </div>
            </div>
    </div>
  

</body>
</html>

The above code should look like this Image below in your preferred browser.

Use cases for order.html

Leave a Comment