CSS Flex'ų Plytelių Problemos

Pirmoji plytelių problema iš esmės yra akivaizdi iš karto - labai nepatogu tai, kad tėvinis elementas privalo aiškiai nustatyti aukštį. Juk mums gali būti tokia situacija, kad blokų kiekis keisis dinamiškai ir jų skaičius bus tada mažesnis, tada didesnis nei 9.

O antroji problema atsiras, jei blokų kiekis bus toks, kad paskutinėje eilutėje bus per mažai blokų. Tokiu atveju paskutinė eilutė atrodys baisiai:

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

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

Pasirodo, kad net horizontaliai reikšmė space-between mūsų atveju veikia prastai.

Apibendrinkime: jei jūsų antrinių elementų kiekis visada yra pastovus ir normaliai telpa į tėvinį elementą, tai plytelė su space-between yra pakankamai patogus dalykas. Priešingu atveju teks sugalvoti ką nors kito.

Duoti 12 elementai. Sukurkite iš jų plytelę po 4 elementus eilėje, kai kiekvieno elemento plotis 100px, o atstumas tarp jų 20px.

Duoti 12 elementai. Sukurkite iš jų plytelę po 3 elementus eilėje, kai kiekvieno elemento plotis 150px, o atstumas tarp jų 10px.