CSS-Flexbox/04-cross-axis-alignment-and-flow-direction.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
<!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 {
			margin: 1rem auto;
			max-width: 52rem;
		}
		img {
			max-width: initial;
			display: initial;
		}
		section {
			max-width: 52rem;
			padding: 2rem;
			margin: auto;
			background-color: #32343c;

			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 2.4rem;
		}
		/* To larger devices */
		@media screen and (width > 767px){
			section {
				flex-direction: row;
			}
		}
	</style>
</head>

<body>
	<h1>04 Cross-axis alignment and flow direction</h1>
	<section>
			<p><span>300+</span> Customers love using<br> our produc 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">
	</section>
</body>

</html>