CSS
Nested Flexbox for Complex UI Components
Construct intricate UI components like multi-section cards or dashboard widgets by strategically nesting Flexbox containers to manage internal alignment and distribution.
.card-wrapper {
display: flex;
flex-wrap: wrap;
gap: 25px;
padding: 20px;
justify-content: center;
}
.complex-card {
display: flex;
flex-direction: column; /* Main card layout: header, body, footer stacked */
width: 300px;
min-height: 250px;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
overflow: hidden;
background-color: #fff;
}
.card-header {
background-color: #4CAF50;
color: white;
padding: 15px;
font-size: 1.2em;
font-weight: bold;
display: flex; /* Flexbox inside header for title and icon */
justify-content: space-between;
align-items: center;
}
.card-body {
padding: 15px;
flex-grow: 1; /* Allows body to take up remaining vertical space */
display: flex; /* Flexbox inside body for content arrangement */
flex-direction: column;
gap: 10px;
}
.body-section {
display: flex; /* Flexbox inside body sections */
justify-content: space-between;
align-items: center;
}
.card-footer {
background-color: #f0f0f0;
padding: 10px 15px;
border-top: 1px solid #eee;
display: flex; /* Flexbox inside footer for buttons */
justify-content: flex-end; /* Pushes buttons to the right */
gap: 10px;
}
.card-button {
background-color: #008CBA;
color: white;
border: none;
padding: 8px 12px;
border-radius: 4px;
cursor: pointer;
}
/* HTML Structure Example:
<div class="card-wrapper">
<div class="complex-card">
<div class="card-header">
<span>Card Title</span>
<span>★</span> <!-- Star icon -->
</div>
<div class="card-body">
<p>This is the main content area of the card.</p>
<div class="body-section">
<span>Status:</span>
<strong>Active</strong>
</div>
<div class="body-section">
<span>Date:</span>
<span>2023-10-26</span>
</div>
</div>
<div class="card-footer">
<button class="card-button">View</button>
<button class="card-button">Edit</button>
</div>
</div>
<div class="complex-card">
<div class="card-header">
<span>Another Card</span>
<span>♥</span> <!-- Heart icon -->
</div>
<div class="card-body">
<p>More content here for the second card, showing how flex-grow makes the body fill space.</p>
</div>
<div class="card-footer">
<button class="card-button">Details</button>
</div>
</div>
</div>
*/
How it works: This snippet illustrates building a complex UI component, like a multi-section card, by *nesting* multiple Flexbox containers. The `.complex-card` itself is a flex container (`flex-direction: column`) to stack its header, body, and footer. Each of these sections (`.card-header`, `.card-body`, `.card-footer`) then acts as its own flex container to arrange *its* internal elements. For example, the header uses `justify-content: space-between` to separate the title and an icon, while the footer uses `justify-content: flex-end` to push buttons to the right. This hierarchical approach allows for highly modular and flexible component design.