102 lines
1.8 KiB
HTML
102 lines
1.8 KiB
HTML
<!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> |