From the course: CSS Layouts: From Float to Flexbox and Grid
Join today to access over 22,500 courses taught by industry experts or purchase this course individually.
Exercise: Build a layout with Flexbox - CSS Tutorial
From the course: CSS Layouts: From Float to Flexbox and Grid
Exercise: Build a layout with Flexbox
- [Instructor] Continuing from the previous layout exercise, let's add one more thing. We'll add a max width for the whole layout to keep it from spanning all the way across for larger screens, then center align it. We could use the same technique that we used in the float layout. We could set a max-width to the container, and then auto align it with margin auto. That will work just fine, but since this is a flex box layout, let's try using flex-based properties instead. With flex box, flex items can be aligned with justified content. This is a property that's added to the flex container. So let's look at the HTML to decide where to put this property. We can't add it to the container class, because we want to align the whole container, not just the flex items within. However, the container is inside of the body element. This means that we can use body as the flex container which would then in turn make the container…
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.