CSSда флексларда плиточка ясаш

Ҳозир флексбокслар ёрдамида плиточка ясашни ўрганамиз. Аввало флекс-блокларни бир неча қаторга, ҳар қаторга учтадан блок жойлаштирамиз.

Бунинг учун флексларни ота-онасига эни 300px ва flex-wrap хосисасини wrap қийматига белгилаймиз, болаларга эса эни 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;
}

Энди блокларимиз ўртасидаги горизонтал масофни ясаймиз. Бунга ота-онанинг энини ошириб, чекловлар учун қўшимча жой яратамиз.

Бизнинг ҳар қаторда учта блок бўлгани учун, уларнинг ўртасида иккита бўшлиқ пайдо бўлади. Фарз қилайлик, биз ҳар бир бўшлиқнинг эни 10px бўлишини истаймиз. Демак, ота-онанинг эни 20px га ошириши керак, яъни 300px эмас, балки 320px қилишимиз керак.

Энди блокларнинг ота-онасига justify-content хосисасини space-between қийматини белгилаб, блоклар ўртасида исталган масофни оламиз:

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

Энди блоклар ўртасига шу ўлчамдаги масофни вертикал йўналтишда ҳам қўшаймиз. Бунга align-content хосисасини space-between қийматига белгилаш мумкин.

Бирок, бунинг учун ота-онага баландлик белгилаш керак, акс ҳолда align-content ишламayди. Баландлигини 320px га белгилаймиз. Бу ҳолда бизнинг 100px баландликдаги уч қатор блок ва уларнинг ўртасидаги 10px ли иккита бўшлиқ мўлжалга мувофиқ жойлашади.

Қуйидаги кодни ишга туширамиз:

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

Ҳаммаси ажойиб ишлайди, лекин кейинги дарсда кўриб чиқадиган баъзи муаммолар мавжуд.