Płytki flexbox w CSS

Nauczmy się teraz tworzyć układ płytek za pomocą flexboxów. Na początku ustawmy kontenery flex w kilka rzędów, po trzy bloki w rzędzie.

Aby to zrobić, ustawmy rodzicowi flexów szerokość na 300px i flex-wrap na wartość wrap, a potomkom szerokość na 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;
}

Dodajmy teraz odstępy między naszymi blokami w poziomie. Aby to zrobić, zwiększmy szerokość rodzica, aby dać dodatkowe miejsce na marginesy.

Ponieważ mamy trzy bloki w rzędzie, oznacza to, że między nimi są dwie przerwy. Załóżmy, że chcemy, aby każda przerwa miała szerokość 10px. Okaże się, że szerokość rodzica trzeba zwiększyć o 20px, czyli zrobić nie 300px, a 320px.

Ustawmy teraz rodzicowi bloków justify-content na wartość space-between i otrzymamy pożądany odstęp między blokami:

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

Dodajmy teraz taki sam odstęp między blokami również w pionie. Aby to zrobić, można ustawić właściwość align-content na wartość space-between.

Aby to jednak zrobić, trzeba ustawić wysokość rodzicowi, inaczej align-content nie będzie działać. Ustawmy wysokość na 320px. W tym przypadku zmieszczą się dokładnie trzy rzędy bloków o wysokości 100px plus dwa marginesy między rzędami po 10px.

Uruchommy to:

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

Wszystko działa wspaniale, ale są pewne problemy, które omówimy w następnej lekcji.