See how to incorporate the flexbox properties into the course project.
- [Instructor] In this exercise, we'll be using Flexbox to style the list containing the contact info. Let's start by removing the default list styles. Back in the editor, open your index dot HTML file. And let's scroll all the way down to the bottom where the contact list is. Let's add a class to the UL containing the list. I'm going to call mine contact dash list. Save the changes, then switch over to the CSS file. Let's scroll down to the contact section of our styles dot CSS and add our new class, dot contact dash list. Open the curly brackets. And we're going to use the list style type property to remove the bullets. List dash style dash type. And we'll set that to none. We'll also set the padding to zero to remove the default space. Let's save our CSS file now and go back to the browser and test for these changes. Refresh and now the bullets and that extra space has been removed. Now we're ready to space out our list items. Back in the CSS file, we're going to initiate the Flexbox layout. We'll add a display flex to the contact list. Then we can use justify content to control the spacing of the list items, which are now flex items. Before we add that, let's just go back to the browser and take a look. Refresh the page. Just by adding the flex property, our items are now aligned horizontally. Okay, let's go back to the CSS file. For the justify content, there's two possible values that we can use. One is space between. This will distribute the flex items evenly by adding space between the items. Let's see how this one looks. Save the file and go back, refresh the browser. And so now it's distributed equally across the container. I want to try another value center. Let's go back to the CSS file. Let's see how center looks. Save and back in the browser, refresh. I'm actually going to stick with center because I want all the items center-aligned within the container. But first, I'm going to need to add some space between the links with padding. I'm choosing padding instead of margin because this can help with accessibility. Let's go back to the CSS file and add a new selector. We want to target just the links. So our new selector is going to be contact list space A and we'll add some padding. By adding space within the links, this will help with accessibility because it will make the click area bigger. There will also be more space to tap if the person is using a mobile device. Let's add 15 pixels. I'll also add display inline block since links are inline elements and I want the links to adjust its position vertically and horizontally when the padding is added. Let's save our file and check our changes. Great, so now there's some extra padding around the links. Now, if I hover over the link where the padding space has been added, we can see that the cursor now changes to the pointer cursor. This indicates the extra click space that we've added with padding. Now, I want to center-align this heading as well. To do so, I won't need Flexbox just for a heading. For any block-level element, I can apply a text-aligned center to the element itself or I can add it to the container so all the elements will inherit this style. Let's go back to our CSS file. I'll add text-aligned center here in the footer selector. This won't affect the flex items but if I were to add any other content, like a copyright note at the bottom, it will be center-aligned too. Let's also center-align all of the content in the header so the top and bottom of the page will match. As we've seen, Flexbox is great for aligning items in all kinds of ways. Before the header, we can also just use text-aligned center here as well. Let's check for our changes. Back in the browser, refresh. Our heading is now centered. And all the text in the header is also centered. We didn't need to lay out the content in rows or columns or resize them, so there was no need to initiate a Flexbox layout for the header. CSS and programming in general is about learning how to use a bunch of different tools and then figuring out which tool is best for each scenario.
- Writing basic selectors
- Setting properties
- Cascade and inheritance
- Setting a font family, font size, text color, and more
- Working with the box model
- Leveraging Grid and Flexbox
- Using the float and position properties
- Working with advanced selectors
- Creating fluid layouts