Understanding Flexbox: Everything you need to know/

...

/

The Flex Item Properties

The Flex Item Properties

We'll cover the following...

We know about flex-containers and their alignment properties.

Beautiful indeed.

Sure you’re getting a feel of what lies ahead.

I’d take my focus off flex-containers now, and walk you through flex-items and their alignment properties.

Like flex-containers, a couple alignment properties are also made available on all flex-items, too.

Let me walk you through them.



1. Order

The order property allows for reordering the flex items within a container.

Basically, with the order property you can move a flex-item from one position to another. Just like you would do with “sortable” lists.

This is done without affecting the source code. Which means the position of the flex items in the HTML source code isn’t changed.

The default value for the order property is 0. It may take on either negative or positive values.

It’s worth noting that flex items are re-ordered based on the number values of the order property. From lowest to highest.

An example always does the trick. Consider the unordered list below:

Press + to interact
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>		  	 	 			
</ul>

By default, the flex items all have an order value of 0. Just as you expected, you get this after some basic styling:

  • HTML
  • CSS (SCSS)
css
The Flex items are displayed just as specified in the HTML source order. Flex item 1, then 2, 3, and 4.


What if for some reason you wanted the flex-item 1 to appear last? Without changing the source order in the HTML document?


“Without changing the source order” means you do not get to do this:


Press +  to interact
<ul>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>1</li>	  	 	 			
</ul>
Now that’s where the order property comes in.


All you need to do is make the order value of flex-item 1 higher than that of other list items.


If you ever used the z-index property on block elements, you’d be familiar with this sort of thing.


Press +  to interact
/*select first li element within the ul */
	li:nth-child(1) {
		order: 1; /*give it a value higher than 0. Remember it's ```order:0``` for other flex-items by default*/
	}
The flex items are then re-ordered from lowest to highest.


Do not forget that by default, list-items 2, 3, and 4 all have the order value of 0 (zero).


Now, flex-item 1 has an order value of 1.


  • HTML
  • CSS (SCSS)
css
Flex-items 2, 3, and 4 all have an order value of 0. So, the HTML source order is kept — no modifications made to the default display.


What if you gave flex-item 2 an order value of 2?


Yes, you guessed right. It goes up the stack too. It now represents the flex-item with the highest order value.


  • HTML
  • CSS (SCSS)
css
And what happens when two flex items have the same order value?


In the example below, flex-item 1 and 3 are given the same order values


Press +  to interact
	li:nth-child(1) {
		order: 1;
	}
	li:nth-child(3) {
		order: 1;
	}
  • HTML
  • CSS (SCSS)
css





The items are still arranged from lowest to highest order value.


This time, flex-item 3 ...