CSS-flexbox för att skapa ett rutnät

Låt oss nu lära oss hur man skapar ett rutnät med flexbox. Låt oss först ordna flex-blocken i flera rader, med tre block per rad.

För att göra detta sätter vi bredden på föräldern till 300px och flex-wrap till värdet wrap, och bredden på barnen till 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;
}

Låt oss nu skapa avstånd mellan våra block horisontellt. För att göra detta ökar vi bredden på föräldern för att ge extra utrymme för marginaler.

Eftersom vi har tre block i rad betyder det att det finns två mellanrum mellan dem. Låt oss säga att vi vill att varje mellanrum ska ha en bredd på 10px. Då blir förälderns bredd ökad med 20px, det vill säga den blir inte 300px, utan 320px.

Låt oss nu sätta justify-content till värdet space-between för föräldern till blocken och få önskat avstånd mellan blocken:

<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;
}

Låt oss nu lägga till samma avstånd mellan blocken vertikalt. För att göra detta kan vi sätta egenskapen align-content till värdet space-between.

För att göra detta måste vi dock sätta en höjd på föräldern, annars kommer align-content inte att fungera. Låt oss sätta höjden till 320px. I det här fallet får vi precis plats med tre rader av block med 100px höjd plus two marginaler mellan rader på 10px.

Låt oss köra:

<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;
}

Allt fungerar utmärkt, men det finns några problem som vi kommer att titta på i nästa lektion.