Flex Container Properties
flex-direction — row (default, horizontal) ya column (vertical). justify-content — main axis ke along distribution (flex-start, center, space-between, space-around). align-items — cross axis ke along alignment (stretch, center, flex-start, flex-end). flex-wrap — items ek line mein force fit karo (nowrap, default) ya multiple lines mein wrap hone do (wrap).
.container {
display: flex;
flex-direction: row; /* row (default) ya column */
justify-content: space-between; /* items ke beech max spacing */
align-items: center; /* cross-axis centering */
flex-wrap: wrap; /* zaroorat par naye line mein wrap ho */
gap: 20px; /* items ke beech consistent spacing */
}- flex-direction = row/column, main axis decide karta hai
- justify-content = main axis distribution, align-items = cross axis
- gap = items ke beech spacing, modern aur clean
align-items single LINE ke items ko cross-axis align karta hai. align-content MULTIPLE lines (jab flex-wrap: wrap ho aur content wrap ho jaaye) ko cross-axis mein distribute karta hai — sirf tab effect dikhta hai jab multiple lines hon.
.container {
display: flex;
flex-wrap: wrap;
align-items: center; /* har line ke andar items center align */
align-content: space-between; /* MULTIPLE lines ke beech spacing */
height: 400px;
}flex-direction: row-reverse/column-reverse items ka VISUAL order reverse kar deta hai (HTML order same rehta hai) — kabhi-kabhi RTL languages ya specific design needs ke liye useful.
.container {
display: flex;
flex-direction: row-reverse;
/* HTML order: A, B, C
Visual order: C, B, A */
}