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

Барлығы керемет жұмыс істейді, бірақ келесі сабақта қарастыратын кейбір мәселелер бар.