ਫਲੈਕਸਬਾਕਸ ਕੀ ਹੈ ਅਤੇ ਤੁਸੀਂ ਇਸ ਨਾਲ ਸਮਗਰੀ ਨੂੰ ਕੇਂਦਰ ਵਿੱਚ ਕਿਵੇਂ ਰੱਖਦੇ ਹੋ?

Flexbox ਇੱਕ ਇੱਕ-ਅਯਾਮੀ ਲੇਆਉਟ ਸਿਸਟਮ ਹੈ — ਇਹ ਆਈਟਮ ਨੂੰ ਇੱਕ ਸਿੰਗਲ row ਜਾਂ column ਵਿੱਚ ਵਿਵਸਥਿਤ ਕਰਦਾ ਹੈ ਅਤੇ ਉਸ ਲਾਈਨ ਦੇ ਨਾਲ ਸਪੇਸ ਨੂੰ ਵੰਡਦਾ ਹੈ। ਇਹ ਸਮੱਸਿਆ alignment ਅਤੇ spacing ਸਮੱਸਿਆਵਾਂ ਦਾ ਆਧੁਨਿਕ ਜਵਾਬ ਹੈ ਜੋ ਪਹਿਲਾਂ floats ਅਤੇ ਹੈਕਸ ਦੀ ਲੋੜ ਸੀ।

.container {
  display: flex;              /* turn on flex; children become flex items */
  flex-direction: row;       /* main axis: row (default) or column */
  gap: 1rem;                 /* space BETWEEN items (no margin hacks) */
}

ਦੋ axes

Flexbox ਦਾ ਇੱਕ main axis (ਜਿਸ ਦਿਸ਼ਾ ਵਿੱਚ ਆਈਟਮ ਵਹਿਦੇ ਹਨ) ਅਤੇ ਇੱਕ cross axis (ਲੰਬਵਤ) ਹੈ। ਗੁਣ ਉਹਨਾਂ ਨਾਲ ਮੈਪ ਕਰਦੇ ਹਨ:

.container {
  justify-content: center; /* aligns along the MAIN axis */
  align-items: center;     /* aligns along the CROSS axis */
}

ਪਰਿਪੂਰਨ ਕੇਂਦਰ — ਮਸ਼ਹੂਰ ਵਰਤੋਂ ਦਾ ਮਾਮਲਾ

.center {
  display: flex;
  justify-content: center; /* horizontal (main axis = row) */
  align-items: center;     /* vertical (cross axis) */
  min-height: 100vh;
}

ਉਹ ਤਿੰਨ ਲਾਈਨਾਂ ਇੱਕ child ਨੂੰ horizontally ਅਤੇ vertically ਦੋਨਾਂ ਤਰਫ ਕੇਂਦਰ ਵਿੱਚ ਰੱਖਦੀਆਂ ਹਨ — ਇੱਕ ਕੰਮ ਜੋ Flexbox ਤੋਂ ਪਹਿਲਾਂ ਬਹੁਤ ਔਖਾ ਸੀ।

ਆਮ ਪੈਟਰਨ

/* push items apart: logo left, menu right */
.navbar { display: flex; justify-content: space-between; align-items: center; }

/* wrap to new lines when items don't fit */
.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }

justify-content ਵਿਕਲਪਾਂ ਵਿੱਚ flex-start, center, flex-end, space-between, space-around, space-evenly ਸ਼ਾਮਿਲ ਹਨ।

ਇਹ ਮਹੱਤਵਪੂਰਨ ਕਿਉਂ ਹੈ

Flexbox navbars, button groups, card rows, centering, ਅਤੇ ਕਿਸੇ ਵੀ "line of items" layout ਲਈ ਰੋਜ਼ਮਰਾਂ ਦਾ ਟੂਲ ਹੈ।

main/cross axis ਮਾਡਲ ਨੂੰ ਸਮਝਣਾ (ਅਤੇ ਇਹ ਕਿ justify-content/align-items swap ਮਤਲਬ ਬਦਲਦੇ ਹਨ ਜਦੋਂ ਤੁਸੀਂ flex-direction ਨੂੰ ਬਦਲਦੇ ਹੋ) ਮੁੱਖ ਮਾਨਸਿਕ ਮਾਡਲ ਹੈ।

1D layouts ਲਈ Flexbox ਅਤੇ 2D ਲਈ Grid ਵਰਤੋ।