Flexbox tiles in CSS

Let's learn how to make a tile on flexboxes now. First, we'll arrange the flex blocks in several rows, three blocks per row.

To do this, we set the width of the flex parent to 300px and flex-wrap to wrap, and the width of the children to 100px:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
	<div class="child">9</div>
</div>

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 300px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Now let's make the distance between our blocks horizontally. To do this, we'll increase the width of the parent to give extra space for padding.

Since we have three blocks in a row, it turns out that there are two gaps between them. Let's say we want each gap to have a width of 10px. It turns out that the parent's width needs to be increased by 20px, that is, make it not 300px, but 320px.

Let's now set the parent of the blocks to justify-content to space-between and get the desired distance between the blocks:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
	<div class="child">9</div>
</div>

.parent {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 320px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Now let's add the same spacing between the blocks vertically. To do this, you can set the align-content property to space-between.

To do this, however, we need to set a height on the parent, otherwise align-content won't work. Let's set the height to 320px. This will give us just enough room for three rows of 100px tall blocks, plus two 10px padding between rows.

Let's run it:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
	<div class="child">9</div>
</div>

.parent {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-content: space-between;
	flex-wrap: wrap;
	width: 320px;
	height: 320px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Everything works great, but there are some issues that we will look at in the next lesson.