Blog for web developers

Flex box with positioning elements

Flex box is one of the new css3 features that allows you to manage layout module. Before flex box we had different types of layout module like block, inline , table etc .. Flex box is very easy and can be use to manage your layout. Since it is a one dimensional based it has restriction of either managing elements on row or either column.

Let’s start with the below example of how a container with 5 children element behaves when we use `display: flex ` to the container element.

You see how the block level elements easily behaves like an inline-block element when used flex in a parent box ? Using `display: flex` to the parent make its children automatically sits in row basis. If you want to make the vertical you can add one more css properties to the container.

.container {
   .....
   flex-direction: column;
}

Now with the help of `align-self` properties we are going to positioned it manually.

.box_2 {
  align-self: center;
}
.box_3 {
  align-self: flex-end;
}
.box_4 {
  align-self: center;
}

Santosh Shah

I am a JavaScript developer having enthusiasm on most frontend skills like JavaScript, HTML, CSS, SASS, node, gulp, angular etc. I love exploring new techniques and like to learn new technologies to keep my self up to date.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.