ਸੰਪੂਰਨ ਫਲੈਕਸਬਾਕਸ ਲੇਆਉਟ ਬਣਾਓ

ਸਾਡੇ ਅਨੁਭਵੀ ਡਰੈਗ-ਐਂਡ-ਡ੍ਰੌਪ ਇੰਟਰਫੇਸ ਨਾਲ CSS ਫਲੈਕਸਬਾਕਸ ਕੋਡ ਦੀ ਕਲਪਨਾ ਕਰੋ, ਅਨੁਕੂਲਿਤ ਕਰੋ ਅਤੇ ਤਿਆਰ ਕਰੋ।

ਕੰਟੇਨਰ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ

display

flex-direction

flex-wrap

justify-content

align-items

align-content

ਆਈਟਮ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ

Items

3 items

ਚੁਣੀ ਗਈ ਆਈਟਮ

flex-grow

flex-shrink

flex-basis

order

align-self

Preview

Item 1

Item 2

Item 3

.flex-container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch; }  .flex-item { /* Default item styles */ flex: 0 1 auto; order: 0; align-self: auto; }

;
  ;Item 1;
  ;Item 2;
  ;Item 3;
;

;
  ;Item 1;
  ;Item 2;
  ;Item 3;
;

ਤਿਆਰ ਕੀਤਾ CSS ਕੋਡ

ਪ੍ਰਸਿੱਧ ਫਲੈਕਸਬਾਕਸ ਪ੍ਰੀਸੈੱਟ

ਖਿਤਿਜੀ ਅਤੇ ਖੜ੍ਹਵੀਂ ਕੇਂਦਰ ਵਿੱਚ ਰੱਖੋ

Content

ਲੋਗੋ, ਬਟਨ, ਜਾਂ ਕਿਸੇ ਵੀ ਤੱਤ ਨੂੰ ਖਿਤਿਜੀ ਅਤੇ ਲੰਬਕਾਰੀ ਦੋਵਾਂ ਤਰ੍ਹਾਂ ਕੇਂਦਰਿਤ ਕਰਨ ਲਈ ਸੰਪੂਰਨ।

ਬਰਾਬਰ ਵਿੱਥ

Item 1

Item 2

Item 3

ਸਪੇਸ-ਬਿਟਵੀਨ ਜਾਂ ਸਪੇਸ-ਅਰਾਊਂਡ ਨਾਲ ਤੱਤਾਂ ਵਿਚਕਾਰ ਬਰਾਬਰ ਸਪੇਸਿੰਗ ਬਣਾਓ।

ਵਰਟੀਕਲ ਮੀਨੂ

Home

About

Contact

ਇਕਸਾਰ ਸਪੇਸਿੰਗ ਅਤੇ ਅਲਾਈਨਮੈਂਟ ਦੇ ਨਾਲ ਇੱਕ ਲੰਬਕਾਰੀ ਨੈਵੀਗੇਸ਼ਨ ਮੀਨੂ ਬਣਾਓ।

ਜਵਾਬਦੇਹ ਗਰਿੱਡ

Box 1

Box 2

Box 3

Box 4

Box 5

ਇੱਕ ਜਵਾਬਦੇਹ ਗਰਿੱਡ ਲੇਆਉਟ ਬਣਾਓ ਜੋ ਉਪਲਬਧ ਜਗ੍ਹਾ ਦੇ ਆਧਾਰ 'ਤੇ ਚੀਜ਼ਾਂ ਨੂੰ ਸਮੇਟਦਾ ਹੈ।

ਹੀਰੋ ਬੈਨਰ

ਮੁੱਖ ਸਿਰਲੇਖ

ਕਾਲ ਟੂ ਐਕਸ਼ਨ ਵਾਲਾ ਹੀਰੋ ਸੈਕਸ਼ਨ

ਸਿਰਲੇਖ, ਉਪਸਿਰਲੇਖ, ਅਤੇ ਕਾਲ-ਟੂ-ਐਕਸ਼ਨ ਬਟਨ ਦੇ ਨਾਲ ਇੱਕ ਹੀਰੋ ਬੈਨਰ ਡਿਜ਼ਾਈਨ ਕਰੋ।

ਫੁੱਟਰ ਲੇਆਉਟ

Company

About Us

Careers

Support

ਮਦਦ ਕੇਂਦਰ

ਸਾਡੇ ਨਾਲ ਸੰਪਰਕ ਕਰੋ

ਛੋਟੀਆਂ ਸਕ੍ਰੀਨਾਂ 'ਤੇ ਸਟੈਕ ਹੋਣ ਵਾਲੇ ਕਾਲਮਾਂ ਨਾਲ ਇੱਕ ਜਵਾਬਦੇਹ ਫੁੱਟਰ ਬਣਾਓ।

ਅਸਲ-ਸੰਸਾਰ ਦੀਆਂ ਉਦਾਹਰਣਾਂ

ਨੈਵੀਗੇਸ਼ਨ ਬਾਰ

Logo

Home

Products

About

Contact

ਖੱਬੇ ਪਾਸੇ ਲੋਗੋ, ਵਿਚਕਾਰ ਮੀਨੂ ਆਈਟਮਾਂ, ਅਤੇ ਸੱਜੇ ਪਾਸੇ ਇੱਕ ਕਾਰਟ ਆਈਕਨ ਵਾਲਾ ਇੱਕ ਸਾਂਝਾ ਨੈਵੀਗੇਸ਼ਨ ਬਾਰ ਲੇਆਉਟ।

Card Grid

ਕਾਰਡ ਸਿਰਲੇਖ

ਕਾਰਡ ਵਰਣਨ ਟੈਕਸਟ ਇੱਥੇ ਹੈ

ਕਾਰਡ ਸਿਰਲੇਖ

ਕਾਰਡ ਵਰਣਨ ਟੈਕਸਟ ਇੱਥੇ ਹੈ

ਕਾਰਡ ਸਿਰਲੇਖ

ਕਾਰਡ ਵਰਣਨ ਟੈਕਸਟ ਇੱਥੇ ਹੈ

ਇੱਕ ਰਿਸਪਾਂਸਿਵ ਕਾਰਡ ਗਰਿੱਡ ਜੋ ਫਲੈਕਸਬਾਕਸ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਵੱਖ-ਵੱਖ ਸਕ੍ਰੀਨ ਆਕਾਰਾਂ ਦੇ ਅਨੁਕੂਲ ਹੁੰਦਾ ਹੈ।

ਲੇਖ ਲੇਆਉਟ

ਲੇਖ ਦਾ ਸਿਰਲੇਖ

1 ਜਨਵਰੀ, 2023 ਨੂੰ ਪੋਸਟ ਕੀਤਾ ਗਿਆ · 5 ਮਿੰਟ ਪੜ੍ਹਿਆ ਗਿਆ

ਲੇਖ ਸਮੱਗਰੀ ਇੱਥੇ ਹੈ। ਇਹ ਇੱਕ ਸੰਖੇਪ ਸਾਰ ਜਾਂ ਪੂਰਾ ਲੇਖ ਟੈਕਸਟ ਹੋ ਸਕਦਾ ਹੈ। ਫਲੈਕਸਬਾਕਸ ਚਿੱਤਰ ਅਤੇ ਟੈਕਸਟ ਨੂੰ ਦ੍ਰਿਸ਼ਟੀਗਤ ਤੌਰ 'ਤੇ ਆਕਰਸ਼ਕ ਤਰੀਕੇ ਨਾਲ ਇਕਸਾਰ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ।

ਮੋਬਾਈਲ ਡਿਵਾਈਸਾਂ 'ਤੇ ਸਟੈਕ ਕੀਤੇ ਖੱਬੇ ਪਾਸੇ ਇੱਕ ਚਿੱਤਰ ਅਤੇ ਸੱਜੇ ਪਾਸੇ ਟੈਕਸਟ ਸਮੱਗਰੀ ਵਾਲਾ ਇੱਕ ਸਾਂਝਾ ਲੇਖ ਲੇਆਉਟ।

ਡੈਸ਼ਬੋਰਡ ਲੇਆਉਟ

Header

Sidebar

ਮੁੱਖ ਸਮੱਗਰੀ

Footer

ਹੈੱਡਰ, ਸਾਈਡਬਾਰ, ਮੁੱਖ ਸਮੱਗਰੀ ਖੇਤਰ, ਅਤੇ ਫੁੱਟਰ ਵਾਲਾ ਡੈਸ਼ਬੋਰਡ ਲੇਆਉਟ, ਫਲੈਕਸਬਾਕਸ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਖਿਤਿਜੀ ਅਤੇ ਲੰਬਕਾਰੀ ਦੋਵੇਂ ਤਰ੍ਹਾਂ ਦੀਆਂ ਅਲਾਈਨਮੈਂਟਾਂ ਲਈ।

ਫਲੈਕਸਬਾਕਸ ਦੇ ਮੁੱਢਲੇ ਤੱਤ

ਫਲੈਕਸਬਾਕਸ ਕੀ ਹੈ?

ਫਲੈਕਸੀਬਲ ਬਾਕਸ ਲੇਆਉਟ, ਜਿਸਨੂੰ ਆਮ ਤੌਰ 'ਤੇ ਫਲੈਕਸਬਾਕਸ ਕਿਹਾ ਜਾਂਦਾ ਹੈ, ਇੱਕ CSS3 ਲੇਆਉਟ ਮਾਡਲ ਹੈ ਜੋ ਇੱਕ ਕੰਟੇਨਰ ਵਿੱਚ ਆਈਟਮਾਂ ਵਿੱਚ ਸਪੇਸ ਵੰਡਣ ਅਤੇ ਇਕਸਾਰ ਕਰਨ ਦਾ ਇੱਕ ਕੁਸ਼ਲ ਤਰੀਕਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ, ਭਾਵੇਂ ਉਹਨਾਂ ਦਾ ਆਕਾਰ ਅਣਜਾਣ ਜਾਂ ਗਤੀਸ਼ੀਲ ਹੋਵੇ।

The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes).

ਮੁੱਖ ਧਾਰਨਾਵਾਂ:ਫਲੈਕਸਬਾਕਸ ਦੋ ਮੁੱਖ ਸੰਕਲਪਾਂ ਨੂੰ ਪੇਸ਼ ਕਰਦਾ ਹੈ:ਫਲੈਕਸ ਕੰਟੇਨਰ and the ਫਲੈਕਸ ਆਈਟਮਾਂ. ਕੰਟੇਨਰ ਮੂਲ ਤੱਤ ਹੈ, ਅਤੇ ਵਸਤੂਆਂ ਇਸਦੇ ਸਿੱਧੇ ਬੱਚੇ ਹਨ।

ਮੁੱਖ ਧੁਰਾ ਬਨਾਮ ਕਰਾਸ ਧੁਰਾ

ਫਲੈਕਸਬਾਕਸ ਲੇਆਉਟ ਦੋ ਧੁਰਿਆਂ 'ਤੇ ਅਧਾਰਤ ਹਨ:main axis and the ਕਰਾਸ ਐਕਸਿਸ.

ਮੁੱਖ ਧੁਰਾ:ਪ੍ਰਾਇਮਰੀ ਧੁਰਾ ਜਿਸ ਦੇ ਨਾਲ ਫਲੈਕਸ ਆਈਟਮਾਂ ਰੱਖੀਆਂ ਜਾਂਦੀਆਂ ਹਨ। ਦੁਆਰਾ ਪਰਿਭਾਸ਼ਿਤflex-direction.
ਕਰਾਸ ਐਕਸਿਸ:ਧੁਰਾ ਮੁੱਖ ਧੁਰੇ ਦੇ ਲੰਬਵਤ ਹੈ। ਇਸਦੀ ਦਿਸ਼ਾ ਮੁੱਖ ਧੁਰੇ ਦੀ ਦਿਸ਼ਾ 'ਤੇ ਨਿਰਭਰ ਕਰਦੀ ਹੈ।

ਮੁੱਖ ਧੁਰਾ →

← ਕਰਾਸ ਐਕਸਿਸ

Start

Main

End

ਕੰਟੇਨਰ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ

Property	Description
`display`	ਇੱਕ ਫਲੈਕਸ ਕੰਟੇਨਰ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ; ਦਿੱਤੇ ਗਏ ਮੁੱਲ ਦੇ ਆਧਾਰ 'ਤੇ ਇਨਲਾਈਨ ਜਾਂ ਬਲਾਕ।
`flex-direction`	ਮੁੱਖ ਧੁਰਾ ਸਥਾਪਿਤ ਕਰਦਾ ਹੈ, ਇਸ ਤਰ੍ਹਾਂ ਫਲੈਕਸ ਕੰਟੇਨਰ ਵਿੱਚ ਫਲੈਕਸ ਆਈਟਮਾਂ ਨੂੰ ਰੱਖਣ ਦੀ ਦਿਸ਼ਾ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ।
`flex-wrap`	ਡਿਫਾਲਟ ਤੌਰ 'ਤੇ, ਸਾਰੀਆਂ ਫਲੈਕਸ ਆਈਟਮਾਂ ਇੱਕ ਲਾਈਨ 'ਤੇ ਫਿੱਟ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਨਗੀਆਂ। ਤੁਸੀਂ ਇਸਨੂੰ ਬਦਲ ਸਕਦੇ ਹੋ ਅਤੇ ਇਸ ਵਿਸ਼ੇਸ਼ਤਾ ਨਾਲ ਲੋੜ ਅਨੁਸਾਰ ਆਈਟਮਾਂ ਨੂੰ ਲਪੇਟਣ ਦੀ ਆਗਿਆ ਦੇ ਸਕਦੇ ਹੋ।
`justify-content`	ਫਲੈਕਸ ਕੰਟੇਨਰ ਦੀ ਮੌਜੂਦਾ ਲਾਈਨ ਦੇ ਮੁੱਖ ਧੁਰੇ ਦੇ ਨਾਲ ਫਲੈਕਸ ਆਈਟਮਾਂ ਨੂੰ ਇਕਸਾਰ ਕਰਦਾ ਹੈ।
`align-items`	ਫਲੈਕਸ ਕੰਟੇਨਰ ਦੀ ਮੌਜੂਦਾ ਲਾਈਨ ਦੇ ਕਰਾਸ ਐਕਸਿਸ ਦੇ ਨਾਲ ਫਲੈਕਸ ਆਈਟਮਾਂ ਨੂੰ ਇਕਸਾਰ ਕਰਦਾ ਹੈ।
`align-content`	ਜਦੋਂ ਕਰਾਸ-ਐਕਸਿਸ ਵਿੱਚ ਵਾਧੂ ਜਗ੍ਹਾ ਹੁੰਦੀ ਹੈ ਤਾਂ ਇੱਕ ਫਲੈਕਸ ਕੰਟੇਨਰ ਦੀਆਂ ਲਾਈਨਾਂ ਨੂੰ ਅੰਦਰ ਇਕਸਾਰ ਕਰਦਾ ਹੈ।

ਆਈਟਮ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ

Property	Description
`order`	ਡਿਫਾਲਟ ਤੌਰ 'ਤੇ, ਫਲੈਕਸ ਆਈਟਮਾਂ ਸਰੋਤ ਕ੍ਰਮ ਵਿੱਚ ਰੱਖੀਆਂ ਜਾਂਦੀਆਂ ਹਨ। ਹਾਲਾਂਕਿ,`order`ਪ੍ਰਾਪਰਟੀ ਫਲੈਕਸ ਕੰਟੇਨਰ ਵਿੱਚ ਦਿਖਾਈ ਦੇਣ ਵਾਲੇ ਕ੍ਰਮ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰਦੀ ਹੈ।
`flex-grow`	ਜੇਕਰ ਲੋੜ ਹੋਵੇ ਤਾਂ ਇੱਕ ਫਲੈਕਸ ਆਈਟਮ ਦੇ ਵਧਣ ਦੀ ਯੋਗਤਾ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ। ਇਹ ਇੱਕ ਯੂਨਿਟ ਰਹਿਤ ਮੁੱਲ ਨੂੰ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ ਜੋ ਇੱਕ ਅਨੁਪਾਤ ਵਜੋਂ ਕੰਮ ਕਰਦਾ ਹੈ।
`flex-shrink`	ਜੇਕਰ ਲੋੜ ਹੋਵੇ ਤਾਂ ਇੱਕ ਫਲੈਕਸ ਆਈਟਮ ਦੇ ਸੁੰਗੜਨ ਦੀ ਯੋਗਤਾ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ।
`flex-basis`	ਫਲੈਕਸ ਫੈਕਟਰਾਂ ਦੇ ਅਨੁਸਾਰ ਕਿਸੇ ਵੀ ਉਪਲਬਧ ਜਗ੍ਹਾ ਨੂੰ ਵੰਡਣ ਤੋਂ ਪਹਿਲਾਂ ਇੱਕ ਫਲੈਕਸ ਆਈਟਮ ਦੇ ਸ਼ੁਰੂਆਤੀ ਆਕਾਰ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ।
`align-self`	ਡਿਫਾਲਟ ਅਲਾਈਨਮੈਂਟ (ਜਾਂ ਦੁਆਰਾ ਨਿਰਧਾਰਤ ਇੱਕ) ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ`align-items`) ਵਿਅਕਤੀਗਤ ਫਲੈਕਸ ਆਈਟਮਾਂ ਲਈ ਓਵਰਰਾਈਡ ਕੀਤਾ ਜਾਵੇਗਾ।

Related Tools

ਸੰਪੂਰਨ ਫਲੈਕਸਬਾਕਸ ਲੇਆਉਟ ਬਣਾਓ

ਸਟਾਈਲਸ ਤੋਂ CSS ਕਨਵਰਟਰ

ਆਪਣੇ SCSS ਕੋਡ ਨੂੰ CSS ਵਿੱਚ ਬਦਲੋ। ਤੇਜ਼, ਆਸਾਨ ਅਤੇ ਸੁਰੱਖਿਅਤ।

SCSS ਤੋਂ CSS ਕਨਵਰਟਰ

ਆਪਣੇ SCSS ਕੋਡ ਨੂੰ CSS ਵਿੱਚ ਬਦਲੋ। ਤੇਜ਼, ਆਸਾਨ ਅਤੇ ਸੁਰੱਖਿਅਤ।

ਨੰਬਰ ਤੋਂ ਸ਼ਬਦ ਪਰਿਵਰਤਕ

ਕਈ ਭਾਸ਼ਾਵਾਂ ਵਿੱਚ ਸੰਖਿਆਤਮਕ ਮੁੱਲਾਂ ਨੂੰ ਉਹਨਾਂ ਦੇ ਸ਼ਬਦ ਪ੍ਰਤੀਨਿਧਤਾਵਾਂ ਵਿੱਚ ਬਦਲੋ

SHA3-384 ਹੈਸ਼ ਕੈਲਕੁਲੇਟਰ

SHA3-384 ਹੈਸ਼ਾਂ ਨੂੰ ਜਲਦੀ ਅਤੇ ਆਸਾਨੀ ਨਾਲ ਤਿਆਰ ਕਰੋ

ਪਾਵਰ ਯੂਨਿਟ ਕਨਵਰਟਰ

ਆਪਣੀਆਂ ਇੰਜੀਨੀਅਰਿੰਗ ਅਤੇ ਵਿਗਿਆਨਕ ਜ਼ਰੂਰਤਾਂ ਲਈ ਸ਼ੁੱਧਤਾ ਨਾਲ ਪਾਵਰ ਦੀਆਂ ਵੱਖ-ਵੱਖ ਇਕਾਈਆਂ ਵਿਚਕਾਰ ਬਦਲੋ