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 иштей албайт. Бийиктигин 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;
}

Баары сонун иштейт, бирок кийинки сабакта карай турган кээ бир маселелер бар.