Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed CSS Flexbox Layout!
You have completed CSS Flexbox Layout!
Preview
In this video, you'll learn how simple it is to control the direction of your flexbox layout, with the flex-direction property.
Resources
Video review
- Some flexbox properties apply to the flex container only, while some apply only to the flex items.
- The
flex-directionproperty applies to the flex container only. - The default value for
flex-directionisrow. - To reverse the direction flex items in a row, use the value
row-reverse. - The value
columnrotates the main axis so that flex items are laid out vertically. - Like the
row-reverseproperty, you can swap the top-to-bottom direction of a column with the valuecolumn-reverse.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
a display value of flex or inline-flex,
makes it a flex container,
0:00
the container that sets the context for
a flex box layout and contains flex items.
0:03
Once you've defined a flex container you
can start taking advantage of flex boxes'
0:08
powerful direction order,
alignment and sizing properties.
0:12
Some flex box properties apply
to the flex container only,
0:17
while some apply only to the flex items.
0:21
So it's important that you know which
properties apply to the flex containers
0:23
and flex items otherwise you might
end up using properties that have
0:26
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up