Flex-box layout properties and live demo

Flexbox allows you to create a responsive layout that is flexible to the window size.

In this post, I would share some of the important flex-box properties. There is also a demo at the end.

Ordering content with order:0... using flexbox

[Child item property]

The higher the order, the later that item comes.

Syntax:

.child-item {
   order:0;
}

In case of a row layout, the higher order item is pushed to the extreme right.

In case of a column layout, the higher order item is pushed to the very end.

By default, the order is 0 of all items.

Example:

    .red {
      background-color: #eb4d4b;
    }

    .green {
      background-color: #6ab04c;
      order: 1;
    }

    .indigo {
      background-color: #30336b;
      order: 2;
    }     

    <div class="green">order:1</div>
    <div class="indigo">order:2</div>
    <div class="red">order:0</div>

Output

Enabling wrap with flex-wrap using flexbox

[Parent property]

Wrap allows you to control the content in horizontal layout when you run out of space.

By default wrap is disabled.

Syntax:

.container{
   flex-wrap: nowrap | wrap;
}

When wrap is enabled, the items are pushed to the next line, if the screen is shrunk and space runs out.

Justifying content using flexbox

[Parent property]

• justify-content: flex-start;: Items are bunched up to the left.

• justify-content: flex-end;: Items are bunched up to the right.

• justify-content: center;: Items are aligned to the center.

• justify-content: space-between;: Items have space between them.

Aligning content across a container using flexbox

[Parent property]

For the align-items to properly work, you need to set the height of the container.

• align-items: flex-start;

• align-items: flex-end;

• align-items: center;

Demo

You can view a live preview of the flexbox layout concepts in this link.
Feel free to experiment and play around :)

Wrapping up

I hope you found this tutorial helpful. Thank you for reading till the end.

I would love to connect with you on any of these platforms.