From the course: Responsive Layout

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Aligning items on main axis

Aligning items on main axis - HTML Tutorial

From the course: Responsive Layout

Start my 1-month free trial

Aligning items on main axis

“

- [Instructor] Justify-content determines how the flex items are aligned on the main axis. The default value for this is flex start. This means that the content is aligned beginning at the start of the main axis. In this case, that's the left of the horizontal axis. Note that the value is different than Grid. There it is just start. Here it is flex-start. So in container, I am going to add justify-content and then flex dash start and save. And nothing changes because that's the default value. If we change that to flex-end, save and refresh, the content is all pushed to the end of the main axis. So this isn't changing the order of items to start at the end of the axis like when we had flex direction. It's just changing the alignment so all the items are moved together over to the end. The third option is center. So on line 12, I'm gonna change this to center and save and refresh, and now they're centered. There are three other values, the same as the ones you have in grid. The next is…

Contents