template html & css

css/flexbox.html

@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="UTF-8">
+	<title>Flexbox</title>
+	<style>
+		.cluster {
+			width: 1200px;
+		}
+		.flexbox {
+			display: flex;
+			width: 1200px;
+			height: 500px;
+		}
+
+		.box {
+			/* en dehors de la division */
+			margin: 4px;
+			/* dans la division */
+			padding: 4px;
+			background-color: #e1dfdf;
+			border: 1px solid black;
+			width: 320px;
+		}
+
+		.box_3 {
+			height: 100px;
+		}
+
+
+		.flexbox[data-flex-wrap] {
+			/* flex-wrap: wrap; */
+			flex-direction: column
+		}
+
+		.flexbox[data-space] {
+			justify-content: space-between;
+		}
+
+		.flexbox[data-align-center] {
+			align-items: center;
+		}
+
+		/* Presentation styles
+		.flexbox>* {
+			max-width: 500px;
+		}
+			 */
+	</style>
+
+	<script>
+
+		document.addEventListener('DOMContentLoaded', function () {
+			// Ce code s'exécutera seulement après que tout le HTML sera chargé
+			const switches = document.querySelectorAll('[role="switch"]');
+			const flexbox = document.querySelector(".flexbox");
+
+			switches.forEach((item) => {
+				item.addEventListener("change", () => {
+					if (item.checked) {
+						flexbox.setAttribute(`data-${item.getAttribute("id")}`, "");
+					} else {
+						flexbox.removeAttribute(`data-${item.getAttribute("id")}`);
+					}
+				});
+			});
+		});
+
+
+
+	</script>
+</head>
+
+<body>
+
+</body>
+<div class="cluster">
+	<div >
+		<label for="flex-wrap">
+			<input type="checkbox" role="switch" id="flex-wrap" />
+			<span>Turn on wrapping</span>
+
+		</label>
+		<label for="align-center">
+			<input type="checkbox" role="switch" id="align-center" />
+			<span>Align items in the center</span>
+		</label>
+		<label for="space">
+			<input type="checkbox" role="switch" id="space" />
+			<span>Add space between</span>
+		</label>
+	</div>
+</div>
+
+<div class="flexbox">
+	<div class="box">box 1</div>
+	<div class="box">box 2</div>
+	<div class="box box_3">box 3</div>
+</div>
+
+</html>