Search⌘ K
AI Features
Home
Courses
Designing Web Layouts with CSS and Flexbox

Flex-wrap Solution

Explore how to apply flex-wrap for building responsive Flexbox containers that adjust fluidly to screen sizes. Understand margin management, media queries, and mobile-first techniques to create organized rows and columns for blog posts or image grids.

We'll cover the following...

Exercise 1

This is an easy exercise. To separate the rows vertically, all we need is one margin rule on the blog posts, setting the top and bottom margins to 25px:

margin: 25px auto;

Exercise 2

First, we’ll remove the width of the container and change the justify-content setting to flex-start:

.container {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

Let’s also add a fixed width to the body to make sure we’re focusing on the same screen size:

body {
  width: 900px;
}

As a result, we have four posts in row one and three posts in row ...