CSS
Align Form Labels and Inputs with CSS Flexbox
Structure and align form elements effectively, ensuring labels and their corresponding inputs are properly positioned and aligned within their containers using various Flexbox properties.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Form Alignment</title>
<style>
body {
font-family: sans-serif;
margin: 20px;
background-color: #f4f4f4;
}
.form-container {
max-width: 500px;
margin: 0 auto;
padding: 30px;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.form-group {
display: flex; /* Make the form group a flex container */
align-items: center; /* Vertically center items */
margin-bottom: 15px;
gap: 15px; /* Space between label and input */
}
.form-group label {
flex-basis: 120px; /* Give labels a fixed width */
min-width: 80px; /* Ensure label doesn't shrink too much */
text-align: right; /* Align label text to the right */
font-weight: bold;
color: #333;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
flex-grow: 1; /* Input takes remaining space */
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
}
.form-group textarea {
resize: vertical; /* Allow vertical resizing */
min-height: 80px;
}
.form-actions {
display: flex;
justify-content: flex-end; /* Push button to the right */
margin-top: 25px;
}
.form-actions button {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.2s ease;
}
.form-actions button:hover {
background-color: #0056b3;
}
/* Responsive behavior for smaller screens */
@media (max-width: 600px) {
.form-group {
flex-direction: column; /* Stack label and input vertically */
align-items: flex-start; /* Align stacked items to the left */
gap: 5px; /* Reduce gap when stacked */
}
.form-group label {
flex-basis: auto; /* Remove fixed basis when stacked */
width: 100%; /* Label takes full width */
text-align: left; /* Align label text to the left */
}
.form-group input,
.form-group textarea {
width: 100%; /* Inputs take full width */
}
.form-actions {
justify-content: center; /* Center button when stacked */
}
}
</style>
</head>
<body>
<div class="form-container">
<form>
<h2>Contact Us</h2>
<div class="form-group">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Your Name" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="[email protected]" required>
</div>
<div class="form-group">
<label for="message">Message:</label>
<textarea id="message" name="message" placeholder="Your Message" required></textarea>
</div>
<div class="form-actions">
<button type="submit">Submit</button>
</div>
</form>
</div>
</body>
</html>
How it works: This snippet demonstrates using Flexbox to align labels and inputs within a form. Each `.form-group` becomes a flex container, allowing labels and inputs to sit side-by-side and be vertically centered using `align-items: center`. The `flex-basis` and `flex-grow` properties control their respective widths. A media query is included to stack the labels and inputs vertically on smaller screens, making the form highly responsive.