CSS Flexbox (Flexible Box Layout) is the industry standard for distributing space and aligning items along a single axis (row or column).
1. Flex Container Properties
⊞Code Example
.flex-container {
display: flex;
flex-direction: row; /* row (default) | column */
justify-content: space-between; /* Horizontal alignment along main axis */
align-items: center; /* Vertical alignment along cross axis */
flex-wrap: wrap; /* nowrap (default) | wrap */
gap: 16px; /* Spacing between child items */
}
2. Centering Anything in 2 Lines of CSS
⊞Code Example
.perfect-center {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}