Flex Parent and Flex Child → Only two items in one row

<div class="flex_parent">
    <div class="flex_child"></div>
    <div class="flex_child"></div>
    <div class="flex_child"></div>
    <div class="flex_child"></div>
    <div class="flex_child"></div>
    <div class="flex_child"></div>
    <div class="flex_child"></div>
    <div class="flex_child"></div>
    <div class="flex_child"></div>
    <div class="flex_child"></div>
<div>

Using flex I want that there should be only two items in one row. I have some confusion so pasted to get more quick insight from the experts.

Both flex_child and flex_parents are set to display: flex

Setting the width or the flex-basis of the child elements to ~half the parent width should put two items per row.
Using 50% you will probably need box-sizing: border-box to fit. Or you can have it a bit under 50% and enable flex grow to fill the space, if you want all the width filling.

Again, all the flex-child classes seem redundant, I would just have .flex-parent > div or .flex-parent > * to select them.

3 Likes

this means anything whether div or h2 or anything else will be considered as a child?

That alone will select any element. When preceded by the parent class and > it selects any element which is a direct (next generation) child of that parent.
It is less efficient than just using div, so maybe use div if there will only ever be divs in the parent.
Using * will enable you to target mixed elements within the parent if they exist.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.