The Flex Item Properties

We’ll cover the following

  • 1. Order
  • 2. Flex grow and flex shrink
  • 3. Flex basis
  • 4. The flex shorthand
    • 1. flex: 0 1 auto
    • 2. Flex: 0 0 auto
    • 3. Flex: 1 1 auto
    • 4. Flex: “positive number”
  • 5. Align-self
    • 1. flex-end
    • 2. center
    • 3. stretch
    • 4. baseline
    • 5. auto

In the previous section, I explained 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:

<html>
<head>
	<title>Understanding Flexbox - Justify Content</title>
</head>

<body>
  <ul>
  	<li>1</li>
  	<li>2</li>
        <li>3</li>
        <li>4</li>
</ul>

</body>
</html>

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

ul {
			display: flex;
			border: 1px solid red;
			padding: 0;
			list-style: none;
			background-color: #e8e8e9;
		}

		li {
			color: #fff;	
		  	width: 100px;
		  	font-size: 2em;
		 	min-height: 100px;
		  	background-color: #8cacea;
		 	margin: 8px;
		}

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:

<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.

/*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.

/*apply to the 1st list element, n=1*/
li:nth-child(1) {
			order: 1
		}

ul {
			display: flex;
			border: 1px solid red;
			padding: 0;
			list-style: none;
			background-color: #e8e8e9;
		}

		li {
			color: #fff;	
		  	width: 100px;
		  	font-size: 2em;
		 	min-height: 100px;
		  	background-color: #8cacea;
		 	margin: 8px;
		}

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.

/*apply to the 1st list element, n=1*/
li:nth-child(1) {
			order: 1
		}

li:nth-child(2) {
			order: 2
		}

ul {
			display: flex;
			border: 1px solid red;
			padding: 0;
			list-style: none;
			background-color: #e8e8e9;
		}

		li {
			color: #fff;	
		  	width: 100px;
		  	font-size: 2em;
		 	min-height: 100px;
		  	background-color: #8cacea;
		 	margin: 8px;
		}

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

li:nth-child(1) {
			order: 1
		}

li:nth-child(3) {
			order: 1
		}

ul {
			display: flex;
			border: 1px solid red;
			padding: 0;
			list-style: none;
			background-color: #e8e8e9;
		}

		li {
			color: #fff;	
		  	width: 100px;
		  	font-size: 2em;
		 	min-height: 100px;
		  	background-color: #8cacea;
		 	margin: 8px;
		}

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

This time, flex-item 3 appears last because it comes after flex-item 1 in the source file (HTML document).

The re-ordering is based on the positions in the source file, when two or more flex items have the same order value.

That was a lot of explanation.

I’d move on to some other property.

2. Flex grow and flex shrink

The beauty of flex items is being “flexible.”

The flex-grow and flex-shrink properties allow us play around this “flexibility” even more.

The flex-grow and flex-shrink properties control how much a flex-item should “grow” (extend) if there are extra spaces, or “shrink” if there are no extra spaces.

They may take up any values ranging from 0 to any positive number. 0 || positive number

Let me demystify that.

Consider the simple unordered list below. It comprises just one list item.

<ul>
	<li>I am a simple list</li>
</ul>
ul {
	display: flex;
}

With a bit more styling, it appears like this.

<html>
<head>
	<title>Flexbox DB</title>
</head>

<body>
<ul>
	<li>I am a simple list</li>		  	 	 	
</ul>
</body>
</html>
ul {
			display: flex;
			border: 1px solid red;
			padding: 0;
			list-style: none;
			background-color: #e8e8e9;
		}

li {
			flex-basis: 150px;
		  	background-color: #8cacea;
		 	margin: 8px;
		 	min-height: 100px;
		 	color: #fff;
		 	padding: 4px;
		}

By default, the flex-grow property is set to 0. By implication, the flex-item does NOT grow to fit the entire space available.

The value 0is like a “turn-off” switch. The flex-grow switch is turned off.

However, if you changed the flex-grow value to 1, here’s what happens.

ul {
			display: flex;
			border: 1px solid red;
			padding: 0;
			list-style: none;
			background-color: #e8e8e9;
		}

li {
			flex-grow: 1;
		  	background-color: #8cacea;
		 	margin: 8px;
		 	min-height: 100px;
		 	color: #fff;
		 	padding: 4px;
		}

The flex-item now “grows” to occupy all the available space. The switch is turned on!

If you tried resizing your browser, the flex-item would also “shrink” to accommodate the new screen width.

Why? By default, the shrink property is set to 1. Which means the flex-shrink switch is also turned on!

I’ll take a closer look at the flex-grow and flex-shrink properties in a bit in case you still don’t feel confident with your understanding of this.

Let’s move on.

3. Flex basis

Remember how I said the beauty of the flex-items is being “flexible”? Well, it appears you also have a control over that.

The flex-basis property specifies the initial size of a flex-item. Before the flex-grow or flex-shrink properties adjust it’s size to fit the container or not.

The previous statement is really important- so i’m taking a moment to reinforce that.

The default value is flex-basis: auto. Flex-basis can take on any values you’d use on the normal width property. That is, percentages || ems || rems || pixels etc

Note that when trying to set the basis property to a zero based value, use the unit also. Use flex-basis: 0px not just flex-basis: 0

I’d bring back the “one list” example here again.

Nb: when trying to set the basis property to a zero based value, Use the unit also. e.g. Use flex-basis: 0px not just flex-basis: 0

I’d bring back the ‘one list’ example here again.

<ul>
	<li>I am a simple list</li>
</ul>
ul {
	display: flex
}

li {
	padding: 4px; /*some breathing space*/
}

By default, the initial width of the flex item is influenced by the default value, flex-basis: auto.

The width of the flex-item is computed “automatically” based on the content size (and obviously, plus whatever padding you set too).

<html>
<head>
	<title>Flexbox DB</title>
</head>

<body>
<ul>
	<li>I am a simple list</li>		  	 	 	
</ul>
</body>
</html>
ul {
			display: flex;
			border: 1px solid red;
			padding: 0;
			list-style: none;
			background-color: #e8e8e9;
		}

li {
			flex-basis: auto;
		  background-color: #8cacea;
		 	margin: 8px;
		 	min-height: 100px;
		 	color: #fff;
		 	padding: 4px;
		}

This means if you increased the content in the flex-item, it automatically resizes to fit.

<ul>
	<li>I am a simple list AND I am a simple list</li>
</ul>
ul {
			display: flex;
			border: 1px solid red;
			padding: 0;
			list-style: none;
			background-color: #e8e8e9;
		}

li {
			flex-basis: auto;
		  	background-color: #8cacea;
		 	margin: 8px;
		 	min-height: 100px;
		 	color: #fff;
		 	padding: 4px;
		}

If, however, you want to set the flex-item to a fixed width, you can also do this:

ul {
			display: flex;
			border: 1px solid red;
			padding: 0;
			list-style: none;
			background-color: #e8e8e9;
		}

li {
			flex-basis: 150px;
		  	background-color: #8cacea;
		 	margin: 8px;
		 	min-height: 100px;
		 	color: #fff;
		 	padding: 4px;
		}

4. The flex shorthand

The flex shorthand allows you set the flex-grow, flex-shrink and flex-basis properties all at once.

When appropriate, I advice you set all three properties at once using the flex shorthand than doing so individually.

li {
  flex: 0 1 auto;
}

The code above is equal to setting the three properties: flex-grow: 0; flex-shrink: 1; flex-basis: auto

Please note the order.

Flex-grow first, then flex-shrink, and then flex-basis. The acronym, GSB may help.

What happens if you fail to set one of the values in the flex-shorthand?

If you set only the flex-grow and flex-shrink values, flex-basis would default to zero.

This is called an absolute flex. And when you set only the flex-basis, you get a relative flex.

//this is an absolute flex item
li {
  flex: 1 1; //flex-basis defaults to 0;
}

//this is a relative flex item
li {
  flex-basis: 200px; //only flex-basis is set
}

I know what you’re thinking. What’s the purpose of the relative and absolute flex?

I answer that question later in this article. Again, blind trust will suffice for now.

Let’s take a look at some very useful flex shorthand values.

1. flex: 0 1 auto

//again, the 'li' represents any flex-item
li {
  flex: 0 1 auto;
}

This is same as writing flex: default and It’s the default behavior of all flex items.

Let me break this down, just a bit.

The flex-basis is set to auto, which means the initial width of the flex-item will be automatically determined based on the size of the contents.

Got that?

Moving on to the next property, the flex-grow value is zero. This means the flex-grow property wouldn’t tamper with the initial width of the flex item.

The grow switch is off.

Since flex-grow controls the “growth” of the flex-items and it’s set to zero, the flex-items will not “grow” to fit the screen.

Finally, the flex shrink value is 1. It says this — “shrink the flex-item when it is necessary”

Here is what this looks like when applied to some flex items.

<html>
<head>
	<title>Flexbox DB</title>
</head>

<body>
<ul>
	<li>I am a simple list</li>
  <li>I am a simple list</li>
</ul>
</body>
</html>
ul {
			display: flex;
			border: 1px solid red;
			padding: 0;
			list-style: none;
			background-color: #e8e8e9;
		}

li {
			flex: 0 1 auto;
		  	background-color: #8cacea;
		 	margin: 8px;
		 	min-height: 100px;
		 	color: #fff;
		 	padding: 4px;
		}

Notice how the flex items don’t grow. The width is computed automatically, and they shrink upon resizing the browser — if necessary.

2. Flex: 0 0 auto

/*again, the 'li' represents any list-item*/

li {
  flex: 0 0 auto;
}

This is same as flex: none.

Using the same framework I established earlier, the width is computed automatically BUT the flex item does NOT grow or shrink (they are both set to zero).

The grow and shrink switches are both off.

It’s essentially a fixed width element whose initial width is based off of the content size in the flex item.

See how this flex shorthand affects two flex items. One housing more content than the other.

ul {
			display: flex;
			border: 1px solid red;
			padding: 0;
			list-style: none;
			background-color: #e8e8e9;
		}

		li {
			flex: 0 0 auto;
		  	background-color: #8cacea;
		 	margin: 8px;
		 	min-height: 100px;
		 	color: #fff;
		 	padding: 4px;
		}

The first thing you should notice is, the flex items both have different widths.

That is expected since the widths are computed automatically, based on the content size.

Try resizing your browser, and you’ll notice that the flex items don’t shrink with its width. They pop out of the parent element, and you have to scroll your browser horizontally to view all the content.

No worries, I’ll show you how to deal with this weird behavior later.

3. Flex: 1 1 auto

This is same as flex: auto.

Use the framework I established earlier.

This says, “compute initial width automatically, but grow to fit the entire available space and shrink if necessary”

The grow and shrink switches are turned on, and the widths computed automatically.

ul {
			display: flex;
			border: 1px solid red;
			padding: 0;
			list-style: none;
			background-color: #e8e8e9;
		}

		li {
			flex: 1 1 auto;
		  	background-color: #8cacea;
		 	margin: 8px;
		 	min-height: 100px;
		 	color: #fff;
		 	padding: 4px;
		}

4. Flex: "positive number"

Where “positive number” represents any positive number (without the quotes)

This is the same as flex: “positive number” 1 0.

flex: 2 1 0 is the same as writing flex:2 where 2 represents any positive number

/*again, the 'li' represents any list-item*/
li {
  flex: 2 1 0; /*same as flex: 2*/
}

Following the same framework I established earlier, this says, “set the initial width of the flex item to zero (ehm, no width?), grow the item to fill the available space, and finally shrink the item whenever possible”

With the flex items having “no width”, how’s the width computed?

The flex-grow value takes over, and determines the extent the flex item “widens”.

That takes care of the no-width problem.

It’s more practical to use this flex shorthand when you have more than one flex item whose initial widths, flex-basis are set to any zero based values e.g. 0px

What really happens is, the widths of the flex items are computed based on the ratios of the flex-grow value.

I’d break that down just a bit.

Consider two list items marked up and styled below.

<ul>
	<li>I am One</li>
	<li>I am Two</li>
</ul>
ul {
	display: flex;
}
li:nth-child(1) {
	flex: 2 1 0; /*same as just writing flex: 2*/
}

li:nth-child(2){
	flex: 1 1 0;
	background-color: #8cacea;
}

Remember that setting flex-grow : 1 lets the flex-item fill up the available space. The grow switch is turned on.

Here you have two flex-items. One has a flex-grow property of 1 and the other 2, what then happens?

You have the grow switches turned on for both items. However, the magnitude of growth differs. 1 and 2.

They both expand to fill up the available space, but in some proportion.

Here’s how it works.

The latter takes up 2/3 of the available space while the former takes 1/3.

You know how I arrived at that?

Basic mathematics ratio. individual ratio / total ratio I hope you didn’t skip those math classes.

<html>
<head>
	<title>Flexbox DB</title>
</head>

<body>
<ul>
	<li>I am one</li>	
	<li>I am two</li>		  	 	 	
</ul>
</body>
</html>
ul {
			display: flex;
			border: 1px solid red;
			padding: 0;
			list-style: none;
			background-color: #e8e8e9;
		}

		li {
			flex: 1 1 auto;
		  	background-color: #8cacea;
		 	margin: 8px;
		 	min-height: 100px;
		 	color: #fff;
		 	padding: 4px;
		}
		
		li:nth-child(1) {
			flex: 2 1 0; /*same as just writing flex: 2*/
		}

		li:nth-child(2){
			flex: 1 1 0;
		}

You see what’s happening?

Even though both flex-items have contents of the same size (approximately), they however take up different spaces.

The widths are not based on the content size, but the grow values.

One is about two times the other.

5. Align-self

The align-self property takes a step further in giving us so much control over flex items.

You already saw how the align-items property helps in collectively aligning all flex-items within a flex-container.

What if you wanted to change the position of a single flex-item along the cross-axis, without affecting the neighboring flex-items?

This is where the align-self property comes to the rescue.

It may take on any of these values: auto || flex-start || flex-end || center || baseline || stretch

li:first-of-type {
	align-self: auto || flex-start || flex-end || center || baseline || stretch
}

These are values you’re already familiar with, but as a refresher here’s how they affect a particular targeted item.

In this case, the first item within the container.

The targeted flex-item is in red.

1. flex-end

flex-end aligns the targeted item to the end of the cross axis.

<!DOCTYPE html>
<html>
<head>
	<title>Flexbox DB</title>
	<style type="text/css">
		html,
		body {
			height: 100%;
		}

		ul {
			display: flex;
			border: 1px solid red;
			padding: 0;
			list-style: none;
			justify-content: space-between;
			align-items: flex-start;
			min-height: 50%;
			background-color: #e8e8e9;
		}

		li {
		  width: 100px;
		  background-color: #8cacea;
		  margin: 8px;
		  font-size: 2rem;
		}

		li:first-child {
			background-color: red;
			align-self: flex-end;
		}	
	</style>
</head>
<body>
<ul>
	<li>I am list 1</li>
	<li>I am list 2</li>
	<li>I am list 3</li>			  	 	 			
</ul>
</body>
</html>

2. center

center aligns the targeted item to the center of the cross axis.

<!DOCTYPE html>
<html>
<head>
	<title>Flexbox DB</title>
	<style type="text/css">
		html,
		body {
			height: 100%;
		}

		ul {
			display: flex;
			border: 1px solid red;
			padding: 0;
			list-style: none;
			justify-content: space-between;
			align-items: flex-start;
			min-height: 50%;
			background-color: #e8e8e9;
		}

		li {
		  width: 100px;
		  background-color: #8cacea;
		  margin: 8px;
		  font-size: 2rem;
		}

		/* Select first list element within the unordered list*/
		li:first-child {
			background-color: red;
			align-self: center;
		}	
	</style>
</head>
<body>
<ul>
	<li>I am list 1</li> <!-- Selected list element -->
	<li>I am list 2</li>
	<li>I am list 3</li> 		  	 	 			
</ul>
</body>
</html>

3. stretch

stretch “stretches” the targeted flex item to fill up the available space along the cross axis.

<!DOCTYPE html>
<html>
<head>
	<title>Flexbox DB</title>
	<style type="text/css">
		html,
		body {
			height: 100%;
		}

		ul {
			display: flex;
			border: 1px solid red;
			padding: 0;
			list-style: none;
			justify-content: space-between;
			align-items: flex-start;
			min-height: 50%;
			background-color: #e8e8e9;
		}

		li {
		  width: 100px;
		  background-color: #8cacea;
		  margin: 8px;
		  font-size: 2rem;
		}

		/*Select first list element(li) within the unordered list(ul)*/
		li:first-child {
			background-color: red;
			align-self: stretch;
		}	
	</style>
</head>
<body>
<ul>
	<li>I am list 1</li>
	<li>I am list 2</li>
	<li>I am list 3</li>		  	 	 			
</ul>
</body>
</html>

4. baseline

baseline aligns the targeted flex item along the baseline.

It does look like the same result as flex-start but I’m sure you understand what the baseline is.

I explained that much earlier.

<!DOCTYPE html>
<html>
<head>
	<title>Flexbox DB</title>
	<style type="text/css">
		html,
		body {
			height: 100%;
		}

		ul {
			display: flex;
			border: 1px solid red;
			padding: 0;
			list-style: none;
			justify-content: space-between;
			align-items: flex-start;
			min-height: 50%;
			background-color: #e8e8e9;
		}

		li {
		  width: 100px;
		  background-color: #8cacea;
		  margin: 8px;
		  font-size: 2rem;
		}

		li:first-child {
			background-color: red;
			align-self: baseline;
		}	
	</style>
</head>
<body>
<ul>
	<li>I am list 1</li>
	<li>I am list 2</li>
	<li>I am list 3</li>		  	 	 			
</ul>
</body>
</html>

5. auto

auto sets the value of the targeted flex item to the parent’s align-items value or stretch if the element has no parent.

In the case below, the flex-container has an align-items value of flex-start

This aligns all the flex-items to the start of the cross-axis.

The targeted flex-item now inherits the flex-start value — the parent’s align-items value.

<!DOCTYPE html>
<html>
<head>
	<title>Flexbox DB</title>
	<style type="text/css">
		html,
		body {
			height: 100%;
		}

		ul {
			display: flex;
			border: 1px solid red;
			padding: 0;
			list-style: none;
			justify-content: space-between;
			align-items: flex-start;
			min-height: 50%;
			background-color: #e8e8e9;
		}

		li {
		  width: 100px;
		  background-color: #8cacea;
		  margin: 8px;
		  font-size: 2rem;
		}

		/* Select first list element within the unordered list*/
		li:first-child {
			background-color: red;
			align-self: auto;
		}	
	</style>
</head>
<body>
<ul>
	<li>I am list 1</li> <!--selected list element-->
	<li>I am list 2</li>
	<li>I am list 3</li>		  	 	 			
</ul>
</body>
</html>

This is the base styling on the flex-items used above. Just so you understand what’s going on even better.

ul {
	display: flex;
	border: 1px solid red;
	padding: 0;
	list-style: none;
	justify-content: space-between;
	align-items: flex-start; /*affects all flex-items*/
	min-height: 50%;
	background-color: #e8e8e9;
}

li {
  width: 100px;
  background-color: #8cacea;
  margin: 8px;
  font-size: 2rem;
}

Also Read – https://codingtimes.in/the-flex-container-properties/

One comment

Leave a Reply

Your email address will not be published.