CSS
Flexible Item Distribution and Wrapping with Flexbox
Learn to distribute items evenly within a Flexbox container, allowing them to wrap onto new lines and grow or shrink to fill available space, creating highly dynamic and responsive layouts.
.flex-container {
display: flex;
flex-wrap: wrap; /* Allows items to wrap to the next line */
justify-content: space-around; /* Distributes items with space around them */
gap: 25px; /* Spacing between wrapped items */
padding: 20px;
background-color: #f5f5f5;
}
.flex-item {
flex: 1 1 280px; /* flex-grow: 1, flex-shrink: 1, flex-basis: 280px */
min-width: 200px; /* Prevents items from becoming too narrow */
max-width: 350px; /* Optional: limit maximum width */
background-color: #fff;
border: 1px solid #ddd;
padding: 25px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
text-align: center;
font-family: sans-serif;
color: #333;
}
How it works: This snippet demonstrates a highly flexible Flexbox layout. `display: flex` and `flex-wrap: wrap` enable items to flow horizontally and wrap to new lines if space runs out. `justify-content: space-around` distributes items along the main axis, adding even space around each item. The `flex: 1 1 280px` shorthand is crucial: `flex-grow: 1` allows items to expand, `flex-shrink: 1` allows them to contract, and `flex-basis: 280px` sets a preferred initial size, making the items adapt dynamically to the container's width.