ਫਲੈਕਸਬਾਕਸ ਜੇਨਰੇਟਰ

ਫਲੈਕਸ ਦਿਸ਼ਾ ਦੇ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ, ਲਪੇਟੋ, ਜਾਇਜ਼ ਠਹਿਰਾਓ, ਅਤੇ ਇਕਸਾਰ ਕਰੋ। ਆਈਟਮ ਲੇਆਉਟ ਅੱਪਡੇਟ ਲਾਈਵ ਦੇਖੋ, ਫਿਰ ਕੰਟੇਨਰ CSS ਨੂੰ ਕਾਪੀ ਕਰੋ।

Flexbox Generator

Live

flex-directionflex-wrapjustify-contentalign-items

Gap12px

Items5

CSS output

display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
gap: 12px;

Key capabilities

ਫਲੈਕਸ ਦਿਸ਼ਾ, ਸਮੇਟਣ, ਜਾਇਜ਼ ਠਹਿਰਾਉਣ ਅਤੇ ਅਲਾਈਨ ਕਰਨ ਦੇ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ — ਲੇਆਉਟ ਅੱਪਡੇਟ ਲਾਈਵ ਦੇਖੋ।
ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਚੱਲਦਾ ਹੈ
ਵਰਤਣ ਲਈ ਮੁਫ਼ਤ

ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ

ਫਲੈਕਸ-ਦਿਸ਼ਾ ਅਤੇ ਸਮੇਟਣਾ ਸੈੱਟ ਕਰੋ।
ਜਾਇਜ਼-ਸਮੱਗਰੀ ਅਤੇ ਅਲਾਈਨ-ਆਈਟਮਾਂ ਨੂੰ ਵਿਵਸਥਿਤ ਕਰੋ।
Flexbox CSS ਨੂੰ ਕਾਪੀ ਕਰੋ।

How this tool works

ਫਲੈਕਸ-ਦਿਸ਼ਾ ਅਤੇ ਸਮੇਟਣਾ ਸੈੱਟ ਕਰੋ।
ਜਾਇਜ਼-ਸਮੱਗਰੀ ਅਤੇ ਅਲਾਈਨ-ਆਈਟਮਾਂ ਨੂੰ ਵਿਵਸਥਿਤ ਕਰੋ।
Flexbox CSS ਨੂੰ ਕਾਪੀ ਕਰੋ।

Recommended settings

ਪਹਿਲਾਂ ਡਿਫੌਲਟ ਵਿਕਲਪਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ, ਫਿਰ ਲੋੜ ਪੈਣ 'ਤੇ ਵਿਵਸਥਿਤ ਕਰੋ

Supported formats

Text / on-page input

File size and limits

ਪੁਰਾਣੇ ਫ਼ੋਨਾਂ 'ਤੇ ਬਹੁਤ ਗੁੰਝਲਦਾਰ ਮਲਟੀ-ਲੇਅਰ ਪ੍ਰੀਵਿਊਜ਼ ਹੌਲੀ ਮਹਿਸੂਸ ਕਰ ਸਕਦੇ ਹਨ।

Privacy

ਰੰਗ ਅਤੇ CSS ਜਨਰੇਟਰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਚੱਲਦੇ ਹਨ। ਪੂਰਵਦਰਸ਼ਨ ਅਤੇ ਪਰਿਵਰਤਨ ਕਦੇ ਵੀ ਤੁਹਾਡੀਆਂ ਸ਼ੈਲੀਆਂ ਨੂੰ ਅੱਪਲੋਡ ਨਹੀਂ ਕਰਦੇ ਹਨ।

Common use cases

ਜਦੋਂ ਵੀ ਤੁਹਾਨੂੰ ਲੋੜ ਹੋਵੇ Flexbox ਜਨਰੇਟਰ ਦੀ ਵਰਤੋਂ ਕਰੋ: ਫਲੈਕਸ ਦਿਸ਼ਾ, ਲਪੇਟਣ, ਜਾਇਜ਼ ਠਹਿਰਾਉਣ ਅਤੇ ਇਕਸਾਰ ਕਰਨ ਦੇ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ — ਲੇਆਉਟ ਅੱਪਡੇਟ ਲਾਈਵ ਦੇਖੋ।

Troubleshooting

ਪੇਸਟ ਕਰਨ ਤੋਂ ਬਾਅਦ ਪੂਰਵਦਰਸ਼ਨ ਵੱਖਰਾ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ

ਆਪਣੇ ਪੰਨੇ 'ਤੇ ਪ੍ਰਤੀਯੋਗੀ CSS ਦੀ ਜਾਂਚ ਕਰੋ (ਰੀਸੈੱਟ, ਵਿਰਾਸਤੀ ਰੰਗ)। ਪਹਿਲਾਂ ਬਣਾਏ ਗਏ ਨਿਯਮ ਨੂੰ ਇੱਕ ਅਲੱਗ ਸਟਾਈਲਸ਼ੀਟ ਵਿੱਚ ਕਾਪੀ ਕਰੋ।

ਅਕਸਰ ਪੁੱਛੇ ਜਾਣ ਵਾਲੇ ਸਵਾਲ

ਕੀ ਇਹ ਮੇਰਾ CSS ਅੱਪਲੋਡ ਕਰਦਾ ਹੈ?

ਨਹੀਂ। ਜਨਰੇਟਰ ਅਤੇ ਕਨਵਰਟਰ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਲਾਈਵ ਪ੍ਰੀਵਿਊ ਨਾਲ ਚੱਲਦੇ ਹਨ।

ਕੀ ਮੈਨੂੰ ਇੱਕ ਖਾਤੇ ਦੀ ਲੋੜ ਹੈ?

ਨਹੀਂ। ਟੂਲ ਖੋਲ੍ਹੋ, ਨਿਯੰਤਰਣ ਬਦਲੋ, ਅਤੇ CSS ਦੀ ਨਕਲ ਕਰੋ।