CSS: FlexBox

(Last Updated On: )

I wanted to take a few minutes and just do a basic run through of the common uses of FlexBox. Just from the 30 minutes of doing a run through I found it to be extremely useful and easily configured.

For this example I will use the following html structure.

<div className="div-flex">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
	<div>10</div>
</div>

If you want them to display like the following “12345678910” you style like the following: They all become flex items.

display: inline-flex;

flex-direction:

To make it look like this “12345678910”.

flex-direction: row;

To make it look like this “10987654321”.

flex-direction: row-reverse;

To put it from 1 to 10 below each other.

flex-direction: column;

To put it from 10 to 1 below each other.

flex-direction: column-reverse;

flex-wrap:

If you set nowrap then the flex items will not wrap to the next line.

flex-wrap: nowrap;

If you want the divs to wrap to the next line use wrap. You will notice how it wraps to the next line when it runs out of space.

flex-wrap: wrap;

If you want the divs to wrap to the next line but in reverse. You will notice how it wraps to the next line when it runs out of space. But more than that you will notice that it started at 10 instead of 1.

flex-wrap: wrap-reverse;

flex-flow:

Is used to combine flex-direction and flex-wrap. See below an example. What you will see is that 1 will be on the right and as the text wraps it will wrap to the right side not left.

flex-flow: row-reverse wrap;

justify-content:

You can use this to center justify content. The text will always be center.

justify-content: center;

You can use this to left justify content. The text will always be to the left. Unless you use one of the reverse options in flex-direction or flex-flow.

justify-content: flex-start;

You can use this to right justify content. The text will always be to the right. Unless you use one of the reverse options in flex-direction or flex-flow.

justify-content: flex-end;

If you want to set space between each element to use the width of the page or container element. Notice you have to set the width otherwise it doesn’t seem to work.

width: 100%;
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;

If you want to set space around each element to use the width/height of the page or container element. Notice you have to set the width/height otherwise it doesn’t seem to work.

width: 100%;
height: 100%;
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;

Webkit:

If you want your flex code to work cross-browsers here are some of the commands using webkit and ms.

display: flex;
display: -ms-flexbox;
display: -webkit-flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;