Flexbox Wrapping & Direction

1. flex-direction

The flex-direction property sets the direction of the main axis along which flex items are placed:

.flex-container {
    display: flex;
    flex-direction: row;        /* default: left to right */
    flex-direction: row-reverse; /* right to left */
    flex-direction: column;     /* top to bottom */
    flex-direction: column-reverse; /* bottom to top */
}
            

2. flex-wrap

The flex-wrap property allows items to wrap onto multiple lines if needed:

.flex-container {
    flex-wrap: nowrap;      /* default */
    flex-wrap: wrap;        /* wrap items to next line */
    flex-wrap: wrap-reverse;/* wrap in reverse order */
}
            

3. flex-flow (Shorthand)

The flex-flow shorthand combines flex-direction and flex-wrap:

.flex-container {
    flex-flow: row wrap;
}
            

4. Responsive Layout Example

Allow content to wrap on smaller screens for better responsiveness:

.flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
            

5. Visual Summary

• row: items in horizontal row (default)
• column: items in vertical column
• wrap: items move to new line as needed
• row-reverse / column-reverse: items flow in reverse order

Conclusion

Understanding flex-direction and flex-wrap helps you create adaptable, fluid layouts that respond well to different screen sizes and content volumes.