<style>
.container {
display: flex;
width: 600px;
height: 150px;
border: 2px solid #333;
}
.box {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: bold;
}
/* Differenti parametri di flex-grow */
.box1 {
background-color: #e74c3c;
flex-grow: 1; /* cresce proporzionalmente di 1 */
}
.box2 {
background-color: #3498db;
flex-grow: 2; /* cresce proporzionalmente di 2 */
}
.box3 {
background-color: #2ecc71;
flex-grow: 0; /* non cresce, mantiene la dimensione di base */
}
</style>
</head>
<body>
<a href="#" onClick="window.history.go(-1);">Home</a>
<h2>Utilizzo di flex-grow</h2>
<div class="container">
<div class="box box1">Flex Grow: 1</div>
<div class="box box2">Flex Grow: 2</div>
<div class="box box3">Flex Grow: 0</div>
</div>