CSS-Flexbox/03-wrap-items-multiple-rows.html at main · dragoncillos/CSS-Flexbox · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Laracasts: CSS Flexbox Simplified</title>
	<link rel="stylesheet" href="css/reset-2019.css">
	<style>
		body {
			padding: 2rem;
		}
		h1,
		p {
			margin: 1rem auto;
			max-width: 52rem;
		}
		img {
			max-width: initial;
			display: initial;
		}
		section {
			max-width: 52rem;
			min-height: 30rem;
			padding: 2rem;
			margin: auto;
			background-color: #32343c;

			display: flex;
			justify-content: center;
			align-items: center;
			align-content: flex-start;
			gap: 2.4rem;
			flex-wrap: wrap;
		}
	</style>
</head>

<body>
	<h1>03 Wrap items into multiple rows</h1>
	<p>The section is responsive by just adding the rule flex-wrap: wrap</p>
	<p>You will need to use this property <strong>align-content</strong> only if you have flex items wrapped into multiple rows and you want to control the spacing between those rows. If there's only one row of items or if the height of the container is not bigger than needed, this property has no effect.</p>
	<section>
			<p><span>300+</span> Customers love using<br> our product every day</p>
			<img src="https://www.euromabnet.com/img/meeting/logo-university-hamburg3.png" alt="Logo 1">
			<img src="https://www.euromabnet.com/img/meeting/logo-university-hamburg2.png" alt="Logo 2">
			<img src="https://www.euromabnet.com/img/meeting/logo-sfb-1328.png" alt="Logo 3">
			<img src="https://www.euromabnet.com/img/meeting/logo-absolute-antibody.png" alt="Logo 4">
			<img src="https://www.euromabnet.com/img/meeting/logo-bio-techne.png" alt="Logo 5">
	</section>
</body>

</html>