From the course: CSS Layouts: From Float to Flexbox and Grid

Unlock the full course today

Join today to access over 24,700 courses taught by industry experts.

Orientation with flex-direction and flex-wrap

Orientation with flex-direction and flex-wrap - CSS Tutorial

From the course: CSS Layouts: From Float to Flexbox and Grid

Start my 1-month free trial Buy for my team

Orientation with flex-direction and flex-wrap

“

- [Instructor] Earlier in this course we talked about using the display property to align elements as inline or block or inline-block. Which essentially could be used for creating rows and columns but with a few quirks. Same with floats, with flexbox, flex items can easily be arranged in rows or columns without any extra fixes. Flexbox aligns items based on two axes, the main axis and the cross axis. Items are also arranged based on the start and end points. Main start and main end on the main axis and cross start and cross end on the cross axis. The direction of the main axis is determined by the flex-direction property. When flex-direction is set to row, which is the default, the main axis is horizontal and the main start and main end will run left to right starting on the left. When flex items are set to columns, the main axis is vertical and the main end run from top to bottom starting from the top. Flex…

Contents