Uashi wa Flex katika CSS

Hebu sasa tujifunze jinsi ya kutengeneza uashi kwa kutumia flexbox. Kwanza, tutapanga vizuizi vya flex katika safu kadhaa, kwa vizuizi vitatu kwa kila safu.

Ili kufanya hivyo, tunaweza upana wa kipengele cha mzazi kuwa 300px na flex-wrap thamani wrap, na kwa vizuizi vidogo upana uwe 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;
}

Sasa hebu tufanye nafasi kati ya vizuizi vyetu usawa. Ili kufanya hivyo, tutaongeza upana wa kipengele cha mzazi ili kutoa nafasi ya ziada kwa vizingiti.

Kwa kuwa tuna vizuizi vitatu kwa safu, inamaanisha kuwa kati yao kuna mapengo mawili. Wacha tuseme tunataka kila pengo liwe na upana wa 10px. Itamaanisha kuwa upana wa kipengele cha mzazi inahitaji kuongezeka kwa 20px, yaani ufanyike si 300px, bali 320px.

Sasa hebu tuweke justify-content thamani space-between kwa kipengele cha mzazi na tupate umbali unaotakikana kati ya vizuizi:

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

Sasa hebu tuongeze umbali kama huo kati ya vizuizi na wima. Ili kufanya hivyo, tunaweza kuweka sifa align-content kwa thamani space-between.

Hata hivyo, ili kufanya hivyo, inahitajika kuweka urefu wa kipengele cha mzazi, vinginevyo align-content haitafanya kazi. Wacha tuweke urefu kuwa 320px. Katika kesi hii, vizuizi vitatu kwa safu vitafika kikamilifu, vikiwa na urefu wa 100px pamoja na vizingiti viwili kati ya safu kwa 10px.

Hebu tuitekee:

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

Kila kitu kinafanya kazi vizuri, lakini kuna baadhi ya matatizo ambayo tutayajadili katika somo linalofuata.