DEV Community

Vinod Godti
Vinod Godti

Posted on

1 1

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

"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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more