From the course: Responsive Layout
Unlock the full course today
Join today to access over 24,000 courses taught by industry experts.
Direction - HTML Tutorial
From the course: Responsive Layout
Direction
- [Instructor] When you do layout with Flexbox, the default layout as you saw in the previous video is a row of flex items going from left to right. But you can also go right to left or top to bottom or bottom to top, and that's what we'll look at in this video. The flex-direction property establishes the direction of the main axis. The main axis is where most of the action is happening in Flexbox. The default is horizontal, going from left to right. The cross axis is always the direction perpendicular to the main axis. What you see is the default positions of the main and cross axes. The default main axis is horizontal, going in the direction of text. So for most of you, that is left to right. If you are working with a language like Arabic where the text goes right to left, and you've set the text direction on the page as right to left, then the default for Flexbox is right to left. Everything horizontal in Flexbox will be the opposite direction of what I'm showing you in this video.…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
Defining a flexbox container1m 53s
-
(Locked)
Direction3m 36s
-
(Locked)
Wrapping2m 30s
-
(Locked)
Ordering flex items1m 28s
-
(Locked)
Flexbox alignment overview1m 39s
-
(Locked)
Aligning items on main axis3m 16s
-
(Locked)
Aligning items on cross axis3m 35s
-
(Locked)
Aligning lines on cross axis3m 15s
-
(Locked)
Aligning individual flex items1m 38s
-
(Locked)
Distributing space to flex items4m 43s
-
(Locked)
Challenge: Floats to flexbox1m 21s
-
(Locked)
Solution: Floats to flexbox8m 17s
-
-
-