Matatizo ya Vibamba kwenye Flexi katika CSS

Tatizo la kwanza la vibamba kwa ujumla linaonekana wazi mara moja - ni mbaya sana kwamba mzazi anapaswa kubainisha urefu kwa uwazi. Kwa sababu inawezekana kabisa kwamba idadi ya vitalu itabadilika kwa nguvu na idadi yao itakuwa chini, au zaidi, kuliko 9.

Lakini tatizo la pili litatokea ikiwa idadi ya vitalu ni kama kwamba kwenye safu ya mwisho kutakuwa na idadi isiyotosha ya vitalu. Katika kesi hii safu ya mwisho itaonekana vibaya sana:

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

Inabadilika kuwa hata kwa usawa thamani ya space-between haifanyi kazi vyema katika kesi yetu.

Kwa kufupisha: ikiwa idadi ya watoto wako ni ya kila wakati na inaaingia vyema kwenye mzazi, basi vibamba kwenye space-between ni jambo la kufaa. Vinginevyo itabidi utafute kitu kingine.

Kuna 12 elementi. Zifanye ziwe vibamba kwa 4 elementi kwa safu na upana wa kila elementi kuwa 100px na umbali kati yao kuwa 20px.

Kuna 12 elementi. Zifanye ziwe vibamba kwa 3 elementi kwa safu na upana wa kila elementi kuwa 150px na umbali kati yao kuwa 10px.