<style>
/* Stile base del contenitore */
.container {
display: flex;
flex-wrap: wrap; /* permette di avere più righe */
width: 600px;
height: 400px;
border: 2px solid #333;
margin-bottom: 20px;
padding: 10px;
box-sizing: border-box;
}
/* Stile degli elementi interni */
.box {
width: 100px;
height: 50px;
margin: 5px;
background-color: #4CAF50;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-family: Arial, sans-serif;
font-weight: bold;
}
/* Titolo per ogni esempio */
.title {
font-family: Arial, sans-serif;
font-size: 1.2em;
margin-top: 20px;
}
/* Container per i vari esempi con diverso align-content */
.example {
margin-bottom: 40px;
}
</style>
</head>
<body>
<a href="#" onClick="window.history.go(-1);">Home</a>
<h1>Dimostrazione di align-content</h1>
<div class="example">
<div class="title">align-content: flex-start</div>
<div class="container" style="align-content: flex-start;">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
</div>
<div class="example">
<div class="title">align-content: flex-end</div>
<div class="container" style="align-content: flex-end;">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
</div>
<div class="example">
<div class="title">align-content: center</div>
<div class="container" style="align-content: center;">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
</div>
<div class="example">
<div class="title">align-content: space-between</div>
<div class="container" style="align-content: space-between;">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
</div>
<div class="example">
<div class="title">align-content: space-around</div>
<div class="container" style="align-content: space-around;">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
</div>
<div class="example">
<div class="title">align-content: space-evenly</div>
<div class="container" style="align-content: space-evenly;">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
</div>
<div class="example">
<div class="title">align-content: stretch (default)</div>
<div class="container" style="align-content: stretch;">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
</div>