Rrjeti i Kutive në Flex në CSS

Tani le të mësojmë se si të krijojmë një rrjet kutive duke përdorur flexbox. Së pari, le t'i rregullojmë blloqet flex në disa rreshta, me tre blloqe në një rresht.

Për këtë, prindit të flex-eve do t'i caktojmë gjerësi prej 300px dhe flex-wrap në vlerën wrap, dhe gjatësisë së bijve një gjerësi prej 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;
}

Tani le të krijojmë hapësirë midis blloqeve tona në mënyrë horizontale. Për këtë, le të rrisim gjerësinë e prindit për të krijuar hapësirë shtesë për mbajtje.

Meqë kemi tre blloqe në një rresht, kjo do të thotë se ka dy hapësira midis tyre. Le të themi se ne dëshirojmë që çdo hapësirë të ketë gjerësi 10px. Kjo do të thotë se gjerësia e prindit duhet të rritet me 20px, domethënë të bëhet jo 300px, por 320px.

Tani le t'i caktojmë prindit të blloqeve justify-content në vlerën space-between dhe të marrim hapësirën e dëshiruar midis blloqeve:

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

Tani le të shtojmë të njëjtën hapësirë midis blloqeve edhe në mënyrë vertikale. Për këtë mund të caktohet vetia align-content në vlerën space-between.

Megjithatë, për këtë, duhet të caktohet lartësia e prindit, përndryshe align-content nuk do të funksionojë. Le të caktojmë lartësinë në 320px. Në këtë rast, ne do të kemi vend për tre rreshta blloqesh me 100px lartësi plus dy hapësira midis rreshtave prej 10px.

Le të ekzekutojmë:

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

Gjithçka funksionon mirë, por ka disa probleme që do t'i shqyrtojmë në mësimin e ardhshëm.