CSS Flexbox

.container {
    display: flex;
    /* Container = flex container
       Direct children = flex items */
}

.container {
    display: flex;

    /* Direction — items कुठे जातील */
    flex-direction: row;         /* → left to right (default) */
    flex-direction: row-reverse; /* ← right to left */
    flex-direction: column;      /* ↓ top to bottom */
    flex-direction: column-reverse; /* ↑ bottom to top */

    /* Wrap — items एकाच line मध्ये राहतात का? */
    flex-wrap: nowrap;  /* Default — एकाच line */
    flex-wrap: wrap;    /* पुढच्या line वर जातात */

    /* Main axis alignment (horizontal जर row) */
    justify-content: flex-start;    /* डाव्या बाजूला */
    justify-content: flex-end;      /* उजव्या बाजूला */
    justify-content: center;        /* मध्यभागी */
    justify-content: space-between; /* Items मध्ये समान space */
    justify-content: space-around;  /* Items भोवती समान space */
    justify-content: space-evenly;  /* सगळीकडे समान space */

    /* Cross axis alignment (vertical जर row) */
    align-items: stretch;    /* Default — full height */
    align-items: flex-start; /* वर */
    align-items: flex-end;   /* खाली */
    align-items: center;     /* मध्यभागी — centering साठी! */
}

/* Element पूर्णपणे center करणे — Flexbox ने सगळ्यात सोपे */
.container {
    display: flex;
    justify-content: center; /* Horizontal center */
    align-items: center;     /* Vertical center */
    height: 100vh;           /* Full screen height */
}

.item {
    /* flex-grow — available space किती घेतो */
    flex-grow: 1; /* सगळी available space घेतो */
    flex-grow: 0; /* Default — जेवढा content तेवढाच */

    /* flex-shrink — container छोटा झाल्यावर किती shrink होतो */
    flex-shrink: 1; /* Default — shrink होतो */
    flex-shrink: 0; /* Shrink नाही */

    /* align-self — individual item चे cross-axis alignment */
    align-self: center;
    align-self: flex-start;
}