From the course: CSS Essential Training

Unlock the full course today

Join today to access over 24,900 courses taught by industry experts.

Aligning flex items

Aligning flex items - CSS Tutorial

From the course: CSS Essential Training

Start my 1-month free trial Buy for my team

Aligning flex items

“

- [Instructor] Prior to Flexbox, there were options for center-aligning elements horizontally, but getting elements to align vertically required a few hacks. With Flexbox, two new properties were introduced to achieve this effect. The justify-content property aligns the flex items on the main axis. The align-items property aligns flex items on the cross axis. To center-align a flex item vertically and horizontally, set the value to center for both properties, and that's it. No workarounds required. But these two properties can do a lot more than just center-align items. They can also be used to distribute space between and around the items. Let's look at a demo in CodePen. Right now, we have three list items contained in an unordered list. They're block items, so by default, they stack on top of each other and are the same width as the container. Let's add display flex to initiate the flex layout and define the…

Contents