CSS Flex Order & Flex Direction: How to Reorder Elements and Rows/Columns with CSS Flexbox?

Learn CSS Flex Order & flex-direction properties and how to reorder HTML elements and rows/columns by using these 2 properties of CSS Flexbox.

Aligning HTML elements with standard CSS is really difficult, but using flexbox will make things much easier. By using flexbox, we can easily position our elements in horizontal or vertical order, and in addition, flexbox allows us to change the alignment order of elements in our layout.

So in this video, you're going to learn how to do that by using 2 flexbox properties called flex-direction & order.

#flexbox #css #webdevelopment

[r.s.]

This is the best and simple video for flexbox i've seen so far. So easy to understand. Hoping for more videos. 👏👏

[chi-yinlin]

Thank you for the simple and straight to the point video! It's really helping me grasp unfamiliar concepts since I'm a beginner.

[iamjustine]

Man, this is what I am looking for. I needed the reverse value but I can also use order. Thanks a lot! Subscribed.

[ReactedToAngular]

this video saved my day thanks just in the 20 second of the start i remembered that order is my usecase ❤❤❤❤❤❤❤❤❤❤ enshalla god will lead you to paradise ❤❤❤❤❤❤❤❤❤❤

[balaji]

Simple, Easy, and perfect !! love it

[gambo]

A new videooo 🥳🥳 so easy explained. Thanks a lot and wish u a successful week🖖🏼

[iCodeDre]

Thank you so much. You have a new subscriber ❤

[hooho]

thank you very much!
teşekkürler hocam

[raghibali]

Very well explained
thank you so much

[fetB]

how do i make this 2 columns and auto rows?

[chodavaramsaibharathreddy]

I want to wrap the items but I need minimum 2 items per each row how can achieve that..?

[messyice]

But how do you make rows of 3 when you have more than three item in a row???

[technotoyou]

Many thanks for that Cem. This is the first time I heard of the flex order.

Can you help with another problem. I have 4 evenly spaced cards managed by display: flex, with a flex-wrap: wrap. It works fine, except when the browser gets to a particular width when it shows 3 on one line and 1 on the other. Is there anywhere of telling flex to wrap with to 1 2 or 4 colums without using @media queries? Or will I have to use Grid?

Many thanks
George