ЦСС плочице на флекс боксовима

Хајде сада да научимо како да правимо плочице на флекс боксовима. За почетак поређајмо флекс блокове у више редова, по три блока у реду.

Зато родитељу флекс елемената поставимо ширину на 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;
}

Све ради одлично, али постоје неки проблеми које ћемо размотрити у следећој лекцији.