Controlling the Direction of Flex Items3:47 with Guil Hernandez
In this video, you'll learn how simple it is to control the direction of your flexbox layout, with the flex-direction property.
- Some flexbox properties apply to the flex container only, while some apply only to the flex items.
flex-directionproperty applies to the flex container only.
- The default value for
- To reverse the direction flex items in a row, use the value
- 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 value
[MUSIC] 0:00 In the previous section of this course you'll learn that giving an element 0:04 a display value of flex or inline flex, makes it a flex container. 0:08 The container that set s the context for a flex box layout and contains flex items. 0:12 Once you've defined a flex container you can start taking advantage of flex boxes 0:17 powerful direction order, alignment and sizing properties. 0:21 Some flex box properties apply to the flex container only, 0:26 while some apply only to the flex items. 0:30 So it's important that you know which properties apply to the flex containers 0:32 and flex items otherwise you might end up using properties that have 0:35 no effect on your layout. 0:39 So throughout this section be sure to check the teacher's notes of each video 0:41 for more information on each flex box property. 0:44 First up, you're gonna learn how simple it is to control the direction of your flex 0:48 box layout with the flex direction property. 0:52 To follow along using the latest work space, launch the work space on this page 0:55 or you can download the files to follow along with your own text editor. 1:00 Flex items, by default, 1:05 are laid out horizontally on the main axis from left to right. 1:07 But you can change the direction of flex items with the flex-direction property. 1:12 For example, 1:17 I can change this layout from a horizontal row layout to a vertical column layout. 1:18 I can even reverse the order in which the flex items are displayed. 1:23 The flex-direction property applies to the flex container only. 1:28 If you apply it to a flex item it will have no affect on it. 1:31 Back in the work space I'll open the file flex box CSS. 1:34 I'm going to add the flex direction property inside the container rule. 1:40 The default value for flex direction is row. 1:47 And that's what you're currently seeing in the browser preview. 1:52 Now, to reverse the direction of flex items that are in a row, 1:56 you use the value row-reverse. 2:00 This reverses the main axis direction. 2:06 It's the same horizontal layout as row, except the start and 2:09 end positions of the main axis are swapped. 2:13 So now the flex items are laid out from right to left. 2:16 And notice how Item 1 is on the right side of the flex container. 2:20 With the flex direction property you have full control over the flex container's 2:25 main access, so that means you can also switch the layout of flex items 2:29 from a horizontal row layout to a vertical column layout. 2:34 Watch what happens when I set the flex-direction value to column. 2:39 Pretty neat right. 2:47 So the value column rotates the main axis so 2:48 that the flex items are laid out vertically. 2:52 Now the start and end positions of the main axis run from top to bottom. 2:55 Also each flex item stretches from edge to edge of the flex container. 3:00 Like the row-reverse property, you can swap the top to bottom 3:06 directions of the column with the value column-reverse. 3:10 This reverses the columns main access direction. 3:18 Item 6 is now at the top of the column. 3:19 And Item 1 is at the bottom. 3:25 Now you can start thinking how to use flex direction in your layouts. 3:28 You may, for instance, be working on a response of navigation where you want 3:32 the layout to be one column in small screens and a row in wider screens. 3:36 You can simply change the flex direction inside a media query. 3:41 You will learn more about this in the next section of the course. 3:44
You need to sign up for Treehouse in order to download course files.Sign up