Whats is the difference between flex:1 and order: 1

HTML & CSS
,
1

suppose I have a class .box, and I put this →

.box {flex: 1;}, or .box {order: 1;} then technically what is the difference between the two. what two difference purpose will these serve?

Live wordpress website Link Here.

what mistake I am doing so that the space is vacant despite we are dealing with flex.

The CSS that might be effecting is this →

.footer-left {flex:1; order:1;}
.footer-right {flex:1; order:2;}
.footer-right.nav {order:2;}
.subscribe {order:1;}
.footer-menu {order:1;}
.footer-menu li,.footer-menu li a {display: inline-block;text-decoration:none; padding: 0 5px; color: #000000;}
2

Order is a property of a flex item (direct children of a flex container) and will set the order of how that item is displayed with reference to the other flex items.

If all items are order 1 then it means nothing.

Flex determines how the element is sized and whether it shrinks or grows.

See here for a complete guide.

3

The flex property is a shorthand that takes values for 3 other properties. They are:-

flex-grow
flex-shrink
flex-basis

These are all properties that control size and have nothing to do with order.
So flex: 1; is the same as saying flex-grow: 1; with the other tow properties being omitted.

1 Like
4

Do we have some properties in the Flexbox because of which we can through some child element in the next line or next row.

Click Here, for example, In footer as we are increasing the Items the flex is in action, and all the items are sharing the same row. Can we force a limit that only 3 or 4 items can rest in one row or is there any alternative by which we can force some child element to go into the next row.

5

Hi,

Not sure if I entirely understand the question but you can make flex items wrap and you can set their size as required.

If you wanted three across then set something like this:

.site-footer{flex-wrap:wrap}
.footer-menu{
flex:1 0 33%;
}

(Those are additional styles to be used with your current code).

It all depends on what you need.

You can find some other similar patterns in my demo here.

1 Like
6

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