CSSтеги Flexboxтордо плитка жасаганда келип чыккан маселелер

Плитканын биринчи маселеси жалпысынан дароок көрүнүп турат - ата-эне элементке бийиктикти так бериш керек болгону абдан ыңгайсыз. Анткени бизде динамикалык түрдө өзгөрүп турган жана алардын саны 9дон азы же көп болуп турган блоктор болушу мүмкүн.

Экинчи маселе болсо, эгерде блоктордун саны акыркы катарда жетиштүү эмес сандагы блок болуп калса келип чыгат. Бул учурда акыркы катар жакшы эмес көрүнөт:

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

.parent {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 320px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Көрүнүп тургандай, горизонталдык багытта дагы space-between мааниси биздин учурда начар иштейт.

Кыскача: эгерде сиздин бала элементтериңиздин саны ар дайым турактуу жана ата-эне элементке туура сиңип турса, анда space-between менен плитка жасоо абдан ыңгайлуу нерсе. Аks учурда дагы бир нерсе ойлоп табууга туура келет.

12 элемент берилген. Алардан ар бир элементтин туурасы 100px жана алардын ортосундагы аралык 20px болгон, катарга 4 элементтен турган плитка жасаңыз.

12 элемент берилген. Алардан ар бир элементтин туурасы 150px жана алардын ортосундагы аралык 10px болгон, катарга 3 элементтен турган плитка жасаңыз.