CSS
Aligning Content Within Flexbox Cards
Master vertical alignment of diverse content within flexbox cards, ensuring elements like buttons consistently position at the bottom despite varying text lengths.
.card-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
}
.card {
display: flex; /* Make card itself a flex container */
flex-direction: column; /* Stack content vertically */
flex: 1 1 300px; /* Allow cards to grow, shrink, and have a base width */
border: 1px solid #ccc;
border-radius: 8px;
padding: 15px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
min-height: 200px; /* For demonstration, varying content can result in varied height */
}
.card-title {
font-size: 1.2em;
margin-bottom: 10px;
}
.card-body {
flex-grow: 1; /* Allows body to take up all available space */
margin-bottom: 15px; /* Space before the button */
}
.card-button {
align-self: flex-start; /* Align button to the start horizontally within its column */
padding: 10px 15px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
}
How it works: This snippet shows how to align content within individual flexbox cards, particularly when cards have varying content heights but you want specific elements (like a button) to be consistently positioned. By making each `.card` a flex container with `flex-direction: column`, and applying `flex-grow: 1` to the `.card-body`, the body section expands to fill all available vertical space, pushing the `.card-button` to the bottom while maintaining its own alignment.