ਫਲੈਕਸਬਾਕਸ ਜਨਰੇਟਰ
ਵਿਜ਼ੂਅਲ ਕੰਟਰੋਲਸ ਨਾਲ ਇੱਕ ਫਲੈਕਸ ਕੰਟੇਨਰ ਅਤੇ ਇਸਦੀਆਂ ਆਈਟਮਾਂ ਨੂੰ ਸੈੱਟ ਕਰੋ, ਲੇਆਉਟ ਨੂੰ ਲਾਈਵ ਬਦਲਦੇ ਹੋਏ ਦੇਖੋ, ਅਤੇ ਇੱਕ ਕਲਿੱਕ ਵਿੱਚ CSS ਕਾਪੀ ਕਰੋ।
ਤੁਹਾਡਾ ਲੇਆਉਟ ਸਿੱਧਾ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਬਣਾਇਆ ਜਾਂਦਾ ਹੈ। ਤੁਹਾਡੇ ਵੱਲੋਂ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਕੋਈ ਵੀ ਡਾਟਾ BroBroGo 'ਤੇ ਅੱਪਲੋਡ ਨਹੀਂ ਕੀਤਾ ਜਾਂਦਾ।
ਅਕਸਰ ਪੁੱਛੇ ਜਾਣ ਵਾਲੇ ਸਵਾਲ
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 ਬਿਨਾਂ ਮਾਰਜਿਨ ਦੇ ਆਈਟਮਾਂ ਅਤੇ ਲਾਈਨਾਂ ਵਿਚਕਾਰ ਸਪੇਸ ਸੈੱਟ ਕਰਦਾ ਹੈ।