CSS ਫਲੈਕਸਬਾਕਸ ਲੇਆਉਟ ਦੀ ਜਾਣ-ਪਛਾਣ
CSS ਫਲੈਕਸਬਾਕਸ (Flexbox) ਵੈੱਬ ਡਿਜ਼ਾਈਨ ਵਿੱਚ ਇੱਕ ਸ਼ਕਤੀਸ਼ਾਲੀ ਲੇਆਉਟ ਸਿਸਟਮ ਹੈ, ਜਿਸਦੀ ਵਰਤੋਂ ਤੱਤਾਂ ਨੂੰ ਇੱਕ ਦਿਸ਼ਾ ਵਿੱਚ ਵਿਵਸਥਿਤ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਹ ਟੂਲ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਇੱਕ ਫਲੈਕਸ ਕੰਟੇਨਰ ਅਤੇ ਇਸਦੀਆਂ ਆਈਟਮਾਂ ਨੂੰ ਵਿਜ਼ੂਅਲ ਰੂਪ ਵਿੱਚ ਸੈੱਟ ਕਰਨ, ਲਾਈਵ ਪ੍ਰੀਵਿਊ ਦੇਖਣ ਅਤੇ ਡਿਜ਼ਾਈਨ ਲਈ ਤਿਆਰ CSS ਕੋਡ ਪ੍ਰਾਪਤ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ। ਇਸਦੀ ਵਰਤੋਂ ਆਮ ਲੇਆਉਟ ਜਿਵੇਂ ਕਿ ਕੇਂਦਰਿਤ ਤੱਤ, ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ, ਸਟੈਕ, ਕਾਰਡ ਜਾਂ ਸਾਈਡਬਾਰ ਬਣਾਉਣ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ।
ਕੰਟੇਨਰ ਦੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ (Flex Container Properties)
ਫਲੈਕਸਬਾਕਸ ਲੇਆਉਟ ਦਾ ਮੁੱਖ ਹਿੱਸਾ ਪੇਰੈਂਟ ਕੰਟੇਨਰ ਹੁੰਦਾ ਹੈ। ਇਸ ਟੂਲ ਵਿੱਚ ਕੰਟੇਨਰ ਦੇ ਵਿਵਹਾਰ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰਨ ਲਈ ਹੇਠ ਲਿਖੇ ਵਿਕਲਪ ਦਿੱਤੇ ਗਏ ਹਨ:
- ਦਿਸ਼ਾ (Direction): ਇਹ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ ਕਿ ਆਈਟਮਾਂ ਕਿਸ ਦਿਸ਼ਾ ਵਿੱਚ ਰੱਖੀਆਂ ਜਾਣਗੀਆਂ। ਇਸਦੇ ਵਿਕਲਪਾਂ ਵਿੱਚ ਰੋਅ (Row), ਉਲਟ ਰੋਅ, ਕਾਲਮ ਅਤੇ ਉਲਟਾ ਕਾਲਮ ਸ਼ਾਮਲ ਹਨ।
- ਰੈਪ (Wrap): ਇਹ ਤੈਅ ਕਰਦਾ ਹੈ ਕਿ ਜੇਕਰ ਆਈਟਮਾਂ ਲਈ ਥਾਂ ਘੱਟ ਹੋਵੇ ਤਾਂ ਉਹ ਅਗਲੀ ਲਾਈਨ ਵਿੱਚ ਜਾਣਗੀਆਂ ਜਾਂ ਨਹੀਂ। ਇਸ ਵਿੱਚ ਕੋਈ ਰੈਪ ਨਹੀਂ, ਰੈਪ ਅਤੇ ਉਲਟ ਰੈਪ ਦੇ ਵਿਕਲਪ ਮਿਲਦੇ ਹਨ।
- ਸਮੱਗਰੀ ਨੂੰ ਜਸਟੀਫਾਈ ਕਰੋ (Justify content): ਇਹ ਮੁੱਖ ਐਕਸਿਸ (main axis) ਦੇ ਨਾਲ ਆਈਟਮਾਂ ਦੀ ਅਲਾਈਨਮੈਂਟ ਨੂੰ ਕੰਟਰੋਲ ਕਰਦਾ ਹੈ। ਇਸ ਵਿੱਚ ਸ਼ੁਰੂਆਤ, ਅੰਤ, ਕੇਂਦਰ, ਵਿਚਕਾਰ ਸਪੇਸ (Space between), ਆਲੇ-ਦੁਆਲੇ ਸਪੇਸ (Space around) ਅਤੇ ਬਰਾਬਰ ਸਪੇਸ (Space evenly) ਸ਼ਾਮਲ ਹਨ।
- ਆਈਟਮਾਂ ਨੂੰ ਇਕਸਾਰ ਕਰੋ (Align items): ਇਹ ਕਰਾਸ ਐਕਸਿਸ (cross axis) ਦੇ ਨਾਲ ਆਈਟਮਾਂ ਨੂੰ ਇਕਸਾਰ ਕਰਦਾ ਹੈ। ਇਸ ਵਿੱਚ ਸ਼ੁਰੂਆਤ, ਅੰਤ, ਕੇਂਦਰ, ਖਿੱਚੋ (Stretch) ਅਤੇ ਬੇਸਲਾਈਨ ਸ਼ਾਮਲ ਹਨ।
- ਸਮੱਗਰੀ ਨੂੰ ਇਕਸਾਰ ਕਰੋ (Align content): ਜਦੋਂ ਮਲਟੀ-ਲਾਈਨ ਲੇਆਉਟ ਹੁੰਦਾ ਹੈ, ਤਾਂ ਇਹ ਲਾਈਨਾਂ ਵਿਚਕਾਰ ਸਪੇਸ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰਦਾ ਹੈ। ਇਸ ਵਿੱਚ ਸ਼ੁਰੂਆਤ, ਅੰਤ, ਕੇਂਦਰ, ਖਿੱਚੋ (Stretch), ਵਿਚਕਾਰ ਸਪੇਸ (Space between), ਆਲੇ-ਦੁਆਲੇ ਸਪੇਸ (Space around) ਅਤੇ ਬਰਾਬਰ ਸਪੇਸ (Space evenly) ਦੇ ਵਿਕਲਪ ਹਨ।
- ਗੈਪ (Gap): ਇਹ ਆਈਟਮਾਂ ਅਤੇ ਲਾਈਨਾਂ ਵਿਚਕਾਰ ਇੱਕ ਨਿਸ਼ਚਿਤ ਸੰਖਿਆਤਮਕ ਦੂਰੀ (ਸਪੇਸ) ਸੈੱਟ ਕਰਦਾ ਹੈ।
ਆਈਟਮਾਂ ਦੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ (Flex Item Properties)
ਕੰਟੇਨਰ ਦੇ ਅੰਦਰ ਮੌਜੂਦ ਹਰੇਕ ਆਈਟਮ ਦੇ ਵਿਵਹਾਰ ਨੂੰ ਵੱਖਰੇ ਤੌਰ 'ਤੇ ਵੀ ਬਦਲਿਆ ਜਾ ਸਕਦਾ ਹੈ। ਟੂਲ ਵਿੱਚ ਹਰੇਕ ਆਈਟਮ ਲਈ ਹੇਠ ਲਿਖੇ ਕੰਟਰੋਲ ਉਪਲਬਧ ਹਨ:
- ਕ੍ਰਮ (Order): ਇੱਕ ਸੰਖਿਆਤਮਕ ਮੁੱਲ ਜੋ HTML ਕੋਡ ਨੂੰ ਬਦਲੇ ਬਿਨਾਂ ਸਕ੍ਰੀਨ 'ਤੇ ਆਈਟਮ ਦੇ ਦਿਖਣ ਦਾ ਕ੍ਰਮ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ।
- ਵਧਣਾ (Grow): ਇੱਕ ਸੰਖਿਆਤਮਕ ਮੁੱਲ ਜੋ ਇਹ ਦੱਸਦਾ ਹੈ ਕਿ ਕੰਟੇਨਰ ਵਿੱਚ ਵਾਧੂ ਖਾਲੀ ਥਾਂ ਹੋਣ 'ਤੇ ਆਈਟਮ ਕਿੰਨੀ ਵੱਡੀ ਹੋਵੇਗੀ।
- ਸੁੰਗੜਨਾ (Shrink): ਇੱਕ ਸੰਖਿਆਤਮਕ ਮੁੱਲ ਜੋ ਇਹ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ ਕਿ ਸਪੇਸ ਘੱਟ ਹੋਣ 'ਤੇ ਆਈਟਮ ਕਿੰਨੀ ਸੁੰਗੜੇਗੀ।
- ਬੇਸਿਸ (Basis): ਆਈਟਮ ਦਾ ਸ਼ੁਰੂਆਤੀ ਆਕਾਰ, ਜਿਸ ਨੂੰ ਇੱਕ ਸੰਖਿਆਤਮਕ ਮੁੱਲ ਜਾਂ "ਆਟੋ" ਵਜੋਂ ਸੈੱਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।
- ਖੁਦ ਨੂੰ ਇਕਸਾਰ ਕਰੋ (Align self): ਇਹ ਕਿਸੇ ਖਾਸ ਆਈਟਮ ਨੂੰ ਬਾਕੀ ਆਈਟਮਾਂ ਤੋਂ ਵੱਖਰੇ ਤੌਰ 'ਤੇ ਕਰਾਸ ਐਕਸਿਸ 'ਤੇ ਇਕਸਾਰ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ। ਇਸ ਵਿੱਚ ਆਟੋ, ਸ਼ੁਰੂਆਤ, ਅੰਤ, ਕੇਂਦਰ, ਖਿੱਚੋ (Stretch) ਅਤੇ ਬੇਸਲਾਈਨ ਦੇ ਵਿਕਲਪ ਹਨ।
ਐਕਸਿਸ ਅਤੇ ਰੈਪਿੰਗ ਦੇ ਨਿਯਮ
ਫਲੈਕਸਬਾਕਸ ਲੇਆਉਟ ਮੁੱਖ ਐਕਸਿਸ (main axis) ਅਤੇ ਕਰਾਸ ਐਕਸਿਸ (cross axis) ਦੇ ਸਿਧਾਂਤ 'ਤੇ ਕੰਮ ਕਰਦਾ ਹੈ। ਜਦੋਂ ਦਿਸ਼ਾ ਨੂੰ ਰੋਅ ਤੋਂ ਕਾਲਮ ਵਿੱਚ ਬਦਲਿਆ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਹ ਦੋਵੇਂ ਐਕਸਿਸ ਆਪਸ ਵਿੱਚ ਬਦਲ ਜਾਂਦੇ ਹਨ। ਇਸ ਬਦਲਾਅ ਕਾਰਨ justify-content ਅਤੇ align-items ਦੇ ਕੰਮ ਕਰਨ ਦਾ ਤਰੀਕਾ ਵੀ ਉਲਟ ਹੋ ਜਾਂਦਾ ਹੈ।
ਜਦੋਂ ਰੈਪਿੰਗ ਬੰਦ ਹੁੰਦੀ ਹੈ, ਤਾਂ ਸਾਰੀਆਂ ਆਈਟਮਾਂ ਨੂੰ ਇੱਕੋ ਲਾਈਨ ਵਿੱਚ ਰਹਿਣ ਲਈ ਮਜਬੂਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਪਰ ਜਦੋਂ ਰੈਪਿੰਗ ਚਾਲੂ ਹੁੰਦੀ ਹੈ, ਤਾਂ ਜੋ ਆਈਟਮਾਂ ਕੰਟੇਨਰ ਦੀ ਚੌੜਾਈ ਵਿੱਚ ਫਿੱਟ ਨਹੀਂ ਹੁੰਦੀਆਂ, ਉਹ ਆਪਣੇ ਆਪ ਅਗਲੀ ਲਾਈਨ 'ਤੇ ਚਲੀਆਂ ਜਾਂਦੀਆਂ ਹਨ। ਇਸ ਸਥਿਤੀ ਵਿੱਚ, align-content ਵਿਸ਼ੇਸ਼ਤਾ ਇਹਨਾਂ ਲਾਈਨਾਂ ਦੇ ਸਮੂਹ ਨੂੰ ਸਪੇਸ ਦੇਣ ਲਈ ਸਰਗਰਮ ਹੁੰਦੀ ਹੈ।
ਟੂਲ ਦੀ ਵਰਤੋਂ ਅਤੇ ਆਉਟਪੁੱਟ
ਇਸ ਟੂਲ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਬਹੁਤ ਸਰਲ ਹੈ। ਜਦੋਂ ਤੁਸੀਂ "ਆਈਟਮ ਜੋੜੋ" 'ਤੇ ਕਲਿੱਕ ਕਰਦੇ ਹੋ, ਤਾਂ ਲੇਆਉਟ ਵਿੱਚ ਇੱਕ ਨਵੀਂ ਆਈਟਮ (ਉਦਾਹਰਨ ਲਈ, "Item 5") ਸ਼ਾਮਲ ਹੋ ਜਾਂਦੀ ਹੈ। ਤੁਸੀਂ ਸਕ੍ਰੀਨ 'ਤੇ ਲਾਈਵ ਵਿਜ਼ੂਅਲ ਪ੍ਰੀਵਿਊ ਰਾਹੀਂ ਬਦਲਾਅ ਦੇਖ ਸਕਦੇ ਹੋ।
ਇੱਕ ਵਾਰ ਜਦੋਂ ਤੁਸੀਂ ਆਪਣਾ ਲੋੜੀਂਦਾ ਲੇਆਉਟ ਤਿਆਰ ਕਰ ਲੈਂਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ "CSS ਕਾਪੀ ਕਰੋ" ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰਕੇ ਕੋਡ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੇ ਹੋ। ਕਲਿੱਕ ਕਰਨ ਤੋਂ ਬਾਅਦ, ਬਟਨ ਦੀ ਸਥਿਤੀ ਬਦਲ ਕੇ "Copied" ਹੋ ਜਾਂਦੀ ਹੈ। ਕੋਡ ਜਨਰੇਸ਼ਨ ਦਾ ਇੱਕ ਖਾਸ ਨਿਯਮ ਇਹ ਹੈ ਕਿ ਸਿਰਫ਼ ਉਹਨਾਂ ਆਈਟਮਾਂ ਲਈ ਵੱਖਰੇ CSS ਨਿਯਮ ਤਿਆਰ ਕੀਤੇ ਜਾਂਦੇ ਹਨ ਜਿਨ੍ਹਾਂ ਦੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਵਿੱਚ ਤੁਸੀਂ ਕੋਈ ਬਦਲਾਅ ਕੀਤਾ ਹੁੰਦਾ ਹੈ।
ਪ੍ਰਾਈਵੇਸੀ ਅਤੇ ਪ੍ਰੋਸੈਸਿੰਗ
ਇਸ ਟੂਲ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ ਤੁਹਾਡੀ ਪ੍ਰਾਈਵੇਸੀ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸੁਰੱਖਿਅਤ ਰਹਿੰਦੀ ਹੈ। ਤੁਹਾਡਾ ਲੇਆਉਟ ਸਿੱਧਾ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਬਣਾਇਆ ਜਾਂਦਾ ਹੈ। ਤੁਹਾਡੇ ਵੱਲੋਂ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਕੋਈ ਵੀ ਡਾਟਾ BroBroGo 'ਤੇ ਅੱਪਲੋਡ ਨਹੀਂ ਕੀਤਾ ਜਾਂਦਾ।
ਅਕਸਰ ਪੁੱਛੇ ਜਾਣ ਵਾਲੇ ਸਵਾਲ (FAQ)
justify-content ਅਤੇ align-items ਵਿੱਚ ਕੀ ਅੰਤਰ ਹੈ?
Justify-content ਆਈਟਮਾਂ ਨੂੰ ਮੁੱਖ ਐਕਸਿਸ (axis) ਦੇ ਨਾਲ ਸਪੇਸ ਦਿੰਦਾ ਹੈ — ਜਿਸ ਦਿਸ਼ਾ ਵਿੱਚ ਰੋਅ ਜਾਂ ਕਾਲਮ ਚੱਲਦਾ ਹੈ — ਜਦੋਂ ਕਿ align-items ਉਹਨਾਂ ਨੂੰ ਦੂਜੇ ਐਕਸਿਸ 'ਤੇ ਸਥਿਤੀ ਦਿੰਦਾ ਹੈ। ਦਿਸ਼ਾ ਨੂੰ ਰੋਅ ਤੋਂ ਕਾਲਮ ਵਿੱਚ ਬਦਲੋ ਅਤੇ ਦੋਵੇਂ ਐਕਸਿਸ ਆਪਸ ਵਿੱਚ ਬਦਲ ਜਾਂਦੇ ਹਨ, ਇਸਲਈ justify-content ਉੱਪਰ ਤੋਂ ਹੇਠਾਂ ਅਤੇ align-items ਖੱਬੇ ਤੋਂ ਸੱਜੇ ਕੰਮ ਕਰਨਾ ਸ਼ੁਰੂ ਕਰ ਦਿੰਦਾ ਹੈ।
ਪ੍ਰਤੀ-ਆਈਟਮ ਕੰਟਰੋਲ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ?
ਕਿਸੇ ਆਈਟਮ ਨੂੰ ਉਸਦੇ ਨੰਬਰ ਦੁਆਰਾ ਚੁਣੋ, ਫਿਰ ਸੈੱਟ ਕਰੋ ਕਿ ਖਾਲੀ ਥਾਂ ਨੂੰ ਭਰਨ ਲਈ ਇਹ ਕਿੰਨੀ ਵਧਦੀ (grow) ਹੈ, ਸਪੇਸ ਘੱਟ ਹੋਣ 'ਤੇ ਕਿੰਨੀ ਸੁੰਗੜਦੀ (shrink) ਹੈ, ਇਸਦਾ ਸ਼ੁਰੂਆਤੀ ਆਕਾਰ (basis) ਅਤੇ ਇਸਦੀ ਆਪਣੀ ਕਰਾਸ-ਐਕਸਿਸ ਅਲਾਈਨਮੈਂਟ। Order HTML ਨੂੰ ਛੂਹੇ ਬਿਨਾਂ ਸਕ੍ਰੀਨ 'ਤੇ ਕਿਸੇ ਆਈਟਮ ਨੂੰ ਪਹਿਲਾਂ ਜਾਂ ਬਾਅਦ ਵਿੱਚ ਲੈ ਜਾਂਦਾ ਹੈ। ਸਿਰਫ਼ ਉਹਨਾਂ ਆਈਟਮਾਂ ਨੂੰ ਜਿਨ੍ਹਾਂ ਨੂੰ ਤੁਸੀਂ ਅਸਲ ਵਿੱਚ ਬਦਲਦੇ ਹੋ, CSS ਵਿੱਚ ਆਪਣਾ ਨਿਯਮ ਮਿਲਦਾ ਹੈ।
wrap ਅਤੇ align-content ਕਦੋਂ ਮਹੱਤਵਪੂਰਨ ਹੁੰਦੇ ਹਨ?
ਰੈਪਿੰਗ (wrapping) ਬੰਦ ਹੋਣ ਨਾਲ, ਹਰ ਆਈਟਮ ਨੂੰ ਇੱਕ ਲਾਈਨ 'ਤੇ ਰਹਿਣ ਲਈ ਮਜਬੂਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਅਤੇ ਇਸਨੂੰ ਤੰਗ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਇਸਨੂੰ ਚਾਲੂ ਕਰੋ ਅਤੇ ਜੋ ਆਈਟਮਾਂ ਫਿੱਟ ਨਹੀਂ ਹੁੰਦੀਆਂ ਉਹ ਅਗਲੀ ਲਾਈਨ 'ਤੇ ਚਲੀਆਂ ਜਾਂਦੀਆਂ ਹਨ — ਇਹ ਉਦੋਂ ਹੁੰਦਾ ਹੈ ਜਦੋਂ align-content ਕੰਮ ਕਰਦਾ ਹੈ, ਲਾਈਨਾਂ ਨੂੰ ਇੱਕ ਸਮੂਹ ਵਜੋਂ ਸਪੇਸ ਦਿੰਦਾ ਹੈ। Gap ਬਿਨਾਂ ਮਾਰਜਿਨ ਦੇ ਆਈਟਮਾਂ ਅਤੇ ਲਾਈਨਾਂ ਵਿਚਕਾਰ ਸਪੇਸ ਸੈੱਟ ਕਰਦਾ ਹੈ।