CSS FlexBox Warm Up

You’ve got a list of element, and you want them to be listed correctly in a container, an old-school solution is to use float or display. However, these two CSS properties don’t give you total control of how you can stretch these elements inside a container.

In this article, you’ll discover how to control a list of items inside of a container using flexbox, and this’s a demo of what you want to achieve:

See the Pen FlexBox Sandbox by Arbaoui Mehdi (@arbaoui_mehdi) on CodePen.

A Simple Use Case

Here’s an example of a main container that includes a list of six items.

<div class="container">
	<div class="item item1">1</div>
	<div class="item item2">2</div>
	<div class="item item3">3</div>
	<div class="item item4">4</div>
	<div class="item item5">5</div>
	<div class="item item6">6</div>

By default these items are stacked, but you want them to be horizontally aligned and flexible, for that you’ll use display: flex on the parent, that enable a flex context for all its direct children.

.container {
   display: flex;

Items Alignement

The justify-content gives you this ability to align any .item inside the flex .container along the main axis of the current line. The alignement is done after the lengths and auto margins are applied.

Let’s pack the items around the center.

.container {
  display: flex;
  justify-content: center;

These are the list of justify-content positional alignement values, I suggest that you use each one of them to
have a good understanding of the concept.

justify-content: center;     /* Pack items around the center */
justify-content: start;      /* Pack items from the start */
justify-content: end;        /* Pack items from the end */
justify-content: flex-start; /* Pack flex items from the start */
justify-content: flex-end;   /* Pack flex items from the end */
justify-content: left;       /* Pack items from the left */
justify-content: right;      /* Pack items from the right */

Now let’s add some space for these items.

.container {
  display: block;
  justify-content: space-between;

And there are the list of value that you can use along of justify-content for the distributed alignement of the items.

justify-content: space-between; /* Distribute items evenly
                                   The first item is flush with the start,
                                   the last is flush with the end */
justify-content: space-around;  /* Distribute items evenly
                                   Items have a half-size space
                                   on either end */
justify-content: space-evenly;  /* Distribute items evenly
                                   Items have equal space around them */
justify-content: stretch;       /* Distribute items evenly
                                   Stretch 'auto'-sized items to fit
                                   the container */

Items Order

In general the default order of your items inside the container is the same as its appear in your code, the property order gives you the ability to have a total control of the order of the flexbox items.

.item1 { order: 2; }

.item2 { order: 6; }

.item3 { order: 4; }

.item4 { order: 1; }

.item5 { order: 3; }

.item6 { order: 5; }

Leave a Reply

Your email address will not be published. Required fields are marked *