From the course: CSS Essential Training

Unlock the full course today

Join today to access over 23,200 courses taught by industry experts.

Project: Aligning elements with Flexbox

Project: Aligning elements with Flexbox - CSS Tutorial

From the course: CSS Essential Training

Start my 1-month free trial Buy for my team

Project: Aligning elements with Flexbox

“

- [Instructor] In this project exercise, we'll use Flexbox to align the content in the social media items in the footer. Let's switch over to the editor and add display flex to the footer element. Let's save this file and check this update. Just by adding Flex, the layout is initiated and the flex items are automatically aligned in a row. So that's a start, but let's align the social media list to the right side and leave the content on the left side. We should also add some padding space to the left and right sides of the footer to prevent the text and the icons from lining up to the edge. Back to the editor. The flex items need to be aligned on the main axis so let's use justify content. Then we'll use a value of space between. Space dash between. This will align the first and last flex items to the start and end of the axis. We can also add some padding, zero to the top and bottom then space, then 20 pixels to the left…

Contents