Flex box layout for responsive designs(Part-2)

So far we have covered the flex-direction,justify-content,align-items, and flex-wrap properties and it's value to design/develop the responsive layout. There are more properties in the flex-box like the order of the flex items and align-self.

So let's get started

order

sometimes it is not sufficient to reversing the rows and column order of the container for the exact requirement to develop the layout. In that case, we can use order property to order the items inside the container.By default order of any item is 0 inside the container.we can use positive or negative integers as order values. Order property can only be applied to individual items.

<ul class="flex-box">
    <li class="home">Home</li>
    <li>About</li>
    <li>Portfolio</li>
    <li>Contact</li>
</ul>

.flex-box {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.flex-box :first-child {
    order: 1;
}
.flex-box :last-child {
    order: -1;
}

Highest ordered items are displayed later than that of lowest order items

In the above example "Home" will be displayed last than other 3 and "Contact" will be displayed first as it's order is lower than others

Flex items with same order will be displayed in the same order as source order such as one after other

Thus if you have 4 items with order values of 3, 2, 2, and 0 sets on them respectively, their display order would be 4th, 2nd, 3rd, then 1st.

The 3rd item displayed after the 2nd because it has the same order value and is after it in the source order.

Have look at the code pen link below to get a more clear picture.

align-self

This property can also be applied to individual items.It will accept the same values as align-items and its value for the specific item. Consider the below CSS code with the previous example's Html code.

.flex-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.flex-box :first-child {
    align-self: flex-start;
}

"Home" will be displayed at the beginning of the row. As align-self property and value flex-start was applied in the above code

To get more clarity in align self refer to the below code pen