From the course: CSS Essential Training
Join today to access over 25,600 courses taught by industry experts.
Aligning flex items
From the course: CSS Essential Training
Aligning flex items
- [Instructor] Before Flexbox, there were options for aligning elements horizontally, but aligning elements vertically required a few hacks. With Flexbox, two properties are used to achieve this effect. Justify-content aligns the flex items on the main axis. Align-items aligns the flex items on the cross axis. Let's look at a demo in Codepen. First, we'll initiate the basic Flexbox layout by adding the display property set to flex. Now, let's take a look at the different ways we can align elements using the justify content property. The first value, flex-start, won't change the current alignment because it's the default value. The items are aligned at the main start, which is the left edge. The flex end value aligns the items starting at the main end, which is the right edge. Center aligns the items grouped together in the middle. Space-between aligns the first and last item at the start and end of the main axis, then…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.