Плочки на флекси во 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;
}

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