Ciao, confermo quello che hai scritto sulle mie precedenti richieste ma non sono mai riuscito a capire appieno sia Flex che grid. Se non ti dispiace stavolta vorrei approfondirle e capirle per bene.
Ho seguito il tuo consiglio e azzerato e riscritto il codice di un piccolo esempio. Parto sempre così e poi aumento la difficoltà
Sono partito per l'elaborazione di una form che sia centrata sia in rizzontale che inverticale e che abbia sulle varie righe 1 sola label e input o pù label e più input
1) Definisco il body con altezza, 100% per prendere tutto il viewPort. Mi servirà in seguito per vaere il footer in fondo al video quando il contenuto é corto
2) definisco la classe container-flex, come il body. Se ho capito bene é meglio scrivere anche qui i parametri
3) definisco la form, il form-group per lo spazio verticale tra i campi, il form-label
4) in ultimo il bottone
La prima cosa che non sono riuscito a a fare é avere la prima label incolonnata a dx sulla label più larga. Ci riesco solo se definisco una larghezza fissa. La form dev'essere dinamica per utilizzarla con qualsiai campo o situazione
Ti allego Immagine con flex (flex) e l'immagine di come dovrebbe venire per l'incolonnamento della prima label a dx (grid)
Se non sarà possibile seguirmi nel ragionamento dimmelo così non ti diturbo
Grazie
HTML
<body>
<div class="container-flex">
<form class="form">
<div class="form-group">
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</div>
<div class="form-group">
<label for="telefono">Telefono:</label>
<input type="tel" id="telefono" name="telefono">
</div>
<div class="form-group">
<div class="input-group">
<label for="citta">Città:</label>
<input type="text" id="citta" name="citta">
<label for="cap">CAP:</label>
<input type="text" id="cap" name="cap">
</div>
</div>
<button type="submit">Invia</button>
</form>
</div>
<footer>
<p>Questo è il footer.</p>
</footer>
</body>
CSS
body, html {
margin: 0;
padding: 0;
height: 100%;
font-family: Arial, sans-serif;
}
/* Container flex con posizionamento centrale sia in verticale che orizzontale */
.container-flex {
display: flex;
justify-content: center;
align-items: center;
height: 100%; /* lo centra in Verticale */
}
/* Stile della form */
.form {
background-color: #f5f5f5;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/* Spazio in verticale tra un campo e l'altro */
.form-group {
margin-bottom: 15px;
}
/* Label e input sulla stessa linea */
.form-group label {
/*width: 100px;*/
text-align: right;
margin-right: 10px; /* Distanza dell'input */
}
.form-group input {
width: 100px; /* Larghezza degli input */
padding: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
/* Stili per il pulsante di invio */
button {
display: block;
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
/* Stili per il footer */
footer {
position: fixed;
bottom: 0;
width: 100%;
background-color: #333;
color: white;
text-align: center;
padding: 10px 0;
}
