Plytelių išdėstymas su CSS lankstomaisiais konteineriais

Dabar išmokime kurti plytelių išdėstymą naudojant lankstumuosius konteinerius. Pirmiausia išdėstykime lankstiuosius elementus keliuose eilučių, po tris elementus kiekvienoje eilutėje.

Norėdami tai padaryti, nustatykime tėvinio elemento, kuriame yra lankstieji elementai, plotį į 300px ir flex-wrap reikšmę wrap, o vaikiniams elementams plotį į 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;
}

Dabar padarykime tarpus tarp mūsų elementų horizontaliai. Norėdami tai padaryti, padidinkime tėvinio elemento plotį, kad suteiktume papildomos vietos tarpams.

Kadangi mes turime tris elementus eilutėje, tai reiškia, kad tarp jų yra du tarpai. Tarkime, mes norime, kad kiekvienas tarpas būtų 10px pločio. Taigi, tėvinio elemento plotis turi būti padidintas 20px, tai yra, padarytas ne 300px, o 320px.

Dabar nustatykime tėviniam elementui justify-content reikšmę space-between ir gausime norimą atstumą tarp elementų:

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

Dabar pridėkime tokį patį atstumą tarp elementų ir vertikaliai. Norėdami tai padaryti, galime nustatyti savybę align-content reikšme space-between.

Tačiau tam reikia nustatyti tėvinio elemento aukštį, kitaip align-content neveiks. Nustatykime aukštį į 320px. Tokiu atveju mums tiksliai tilps trys eilutės elementų, kurių aukštis 100px, plius du tarpai tarp eilučių po 10px.

Paleiskime:

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

Viskas veikia nuostabiai, tačiau yra keletas problemų, kurias aptarsime kitoje pamokoje.