Placarea cu flexbox în CSS

Să învățăm acum cum să facem o placare folosind flexbox-uri. Pentru început, să aranjam containerele flex pe mai multe rânduri, câte trei containere pe rând.

Pentru aceasta, setăm părintelui flexilor lățimea de 300px și flex-wrap cu valoarea wrap, iar copiilor lățimea de 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;
}

Acum să facem spațiu între containerele noastre pe orizontală. Pentru aceasta, mărim lățimea părintelui pentru a oferi spațiu suplimentar pentru marginile dintre elemente.

Deoarece avem trei containere pe rând, rezultă că între ele sunt două spații. Să presupunem că vrem ca fiecare spațiu să aibă lățimea de 10px. Rezultă că lățimea părintelui trebuie mărită cu 20px, adică să fie nu 300px, ci 320px.

Acum să setăm părintelui containerelor justify-content cu valoarea space-between și vom obține distanța dorită între containere:

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

Acum să adăugăm un spațiu similar între containere și pe verticală. Pentru aceasta putem seta proprietatea align-content cu valoarea space-between.

Pentru aceasta, totuși, trebuie să setăm o înălțime părintelui, altfel align-content nu va funcționa. Să setăm înălțimea la 320px. În acest caz, vor încăpea exact trei rânduri de containere cu 100px înălțime plus două spații între rânduri de 10px.

Să rulăm:

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

Totul funcționează minunat, dar există unele probleme pe care le vom analiza în lecția următoare.