Now we'll see an interesting example. Have a look at this navigation bar with a logo on the left, a search bar in the middle, and a link on the right. This is the desktop layout. When the screen size gets smaller, notice how the search bar becomes flexible and at a particular breakpoint, the search bar goes into the next row occupying 100% width while the other two elements stay exactly where they were. Let's start from the beginning again and use all of the concepts learned so far. We'll also need another property for this, and I'll show you that. The markup is very simple. We have a <header> element, within which we have a <nav> element that contains an <img>, a <a> link, and our search bar. Without this box, this is what we have. Let's start building this using the mobile-first approach. So let me open the mobile layout, go back and add display: flex to the <nav> element. This

this box, this is what we have. Let's start building this using the mobile-first approach. So let me open the mobile layout, go back and add display: flex to the nav element. This puts all three elements in a row, but for the mobile layout, we want the search input to go into the next row. So let's set flex-wrap to wrap. Also, since we want the search input to occupy 100% of the width, we set flex-basis for the input as 100%. Or since this is the only value we need, we can even use the shorthand property and say 100%. This means the same thing. Okay, let's see what we have. This is great. Let's add some gap and also align the logo and text vertically. For this, gap: 1rem and align-items: center. Also, the logo and the link are horizontally spaced out to push the link to the far right so we can use justify-content: space-between. Done. So with this, the mobile layout is complete. For desktop,

and the link are horizontally spaced out to push the link to the far right so we can use justify-content: space-between. Done. So with this, the mobile layout is complete. For desktop, let's add some media queries and firstly, undo the wrapping. Adding media-screen and min-width: 630px. nav element, flex-wrap, set it to nowrap. The search input still has flex-100%. So let's change that. Let's override that by saying flex-auto. This will change the flex-basis to auto. Let's check. Great. Now everything is done except that the search bar needs to be in the middle and the link on the right. That's where I'd want to introduce you to a new property, order. We can use the order property and rearrange the visual appearance of any of the items in the flex-container. By default, the order of all the items is 0, so they follow the order in the markup. But when you increase