Tegelwerk op Flexboxse in CSS

Laat ons nou leer hoe om tegelwerk op flexboxse te maak. Om mee te begin, laat ons die flex-blokke in verskeie rye plaas, met drie blokke per ry.

Om dit te doen, stel ons die ouer van die flexse se breedte in op 300px en flex-wrap na die waarde wrap, en die kinders se breedte op 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;
}

Laat ons nou die afstand tussen ons blokke horisontaal maak. Om dit te doen, verhoog ons die ouer se breedte om ekstra spasie vir die spasierings te gee.

Aangesien ons drie blokke in 'n ry het, beteken dit dat daar twee gapings tussen hulle is. Kom ons sê ons wil hê elke gaping moet 'n breedte hê van 10px. Dit beteken die ouer se breedte moet verhoog word met 20px, dus maak dit nie 300px nie, maar 320px.

Laat ons nou die blokke se ouer se justify-content stel na die waarde space-between en kry die verlangde afstand tussen die blokke:

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

Laat ons nou dieselfde afstand tussen die blokke vertikaal byvoeg. Om dit te doen kan ons die eienskap align-content stel na die waarde space-between.

Om dit te doen, moet ons eger die hoogte van die ouer spesifiseer, anders sal align-content nie werk nie. Laat ons die hoogte stel na 320px. In hierdie geval sal ons presies drie rye blokke met 'n hoogte van 100px plus twee spasierings tussen die rye van 10px pas.

Laat ons dit uitvoer:

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

Alles werk wonderlik, maar daar is 'n paar probleme wat ons in die volgende les sal bespreek.