Aligning Items to the Bottom of a Column

One common problem Web Designers and Developers face when building layouts 0:00 is figuring out how to align elements with the bottom-edge of a container. 0:04 Regardless of the amount of content inside the container. 0:09 Like this, now using floats or other layout methods, it's really 0:12 tricky to align content to the bottom of a container, but not with flex box. 0:17 So let me show you how. 0:22 You can follow along using the latest workspace, 0:23 just launch the workspace on this page. 0:25 Or download the project files to use your own text editor. 0:27 When you preview the index.html page in a browser, 0:30 you'll see three equal height columns containing a heading, 0:34 some paragraphs, and a fancy button below the paragraphs. 0:38 Now the column on the right contains the most amount of content. 0:42 These columns are flex items, so the first and 0:46 second column stretch to match the height of the third column. 0:48 But you'll see that each column also has a button 0:52 that appears below the content in each column. 0:55 Now the design would have more visual consistency 0:58 if the three buttons all aligned along the bottom edge of the columns, 1:02 even when the text in each column is different. 1:06 So flex box makes aligning these buttons to the bottom super simple. 1:09 I'll show you how. 1:14 In flexbox.css the parent row is already a flex container. 1:15 Its display value is set to flex which, 1:20 as you know, makes all three columns equal in height by default. 1:23 Now earlier in this section you learned that it's possible for 1:28 an element to be both a flex item and a flex container. 1:31 So now I'll need to make the columns flex containers so that I can have 1:35 full control over the direction and alignment of the content inside them. 1:40 So to make the columns a flex container, I'll simply group the class call 1:44 with the to her flex container classes in the media query. 1:49 Now each column is a flex container. 1:53 So that means that the heading, 1:56 paragraphs and buttons inside them are all flex items. 1:58 Now flex containers display their children flex items horizontally, by default. 2:03 So now the heading, paragraphs and buttons are laid out on the same line. 2:08 This is an easy adjustment. 2:12 To fix this, I'll go over to the .col rule inside the top media query, 2:15 and I'll set the flex-direction value to column. 2:20 Now the flex items are vertically stacked inside their columns. 2:27 But this doesn't solve the button alignment problem. 2:33 By now you know that a margin value of auto has an effect on flex item alignment, 2:36 because it absorbs any extra space around a flex item and 2:41 pushes other flex items into different positions. 2:44 So, see if you can figure out what we need to do to align the buttons to 2:47 the bottom of each column. 2:51 Back inside the top media query, 3:01 I'm going to create a new rule that targets the button flex items. 3:04 And give them a margin top property. 3:11 When I set the value to auto. 3:15 [SOUND] Nice! 3:17 It pins the buttons to the bottom of the columns. 3:19 The browser automatically inserts the extra space in a column 3:23 between the button and the flex item above it. 3:27 Now if you don't want your buttons to stretch the full width of a column 3:32 you can change their alignment on the cross axis using the align self property. 3:37 So back inside the button rule I'll add the align 3:42 self property and I"ll set the value to flex start. 3:46 Which aligns the buttons to the left edge of the columns. 3:53 Now, if I want to align them to the right edge, I can use the value flex-end. 3:57 [SOUND] Great. 4:03 So, in the next video, I'll show you the quickest and easiest method for 4:06 creating a sticky footer in your layout. 4:10