LibraTool logoLibraTool

ਮੁਫ਼ਤ CSS ਫਲੈਕਸਬਾਕਸ ਜਨਰੇਟਰ

ਲਾਈਵ ਆਈਟਮਾਂ 'ਤੇ ਫਲੈਕਸ ਦਿਸ਼ਾ, ਰੈਪ, ਜਸਟੀਫਾਈ ਅਤੇ ਅਲਾਈਨ ਨਾਲ ਤਜਰਬਾ ਕਰੋ — ਅਤੇ CSS ਕਾਪੀ ਕਰੋ।

ਲੋਡ ਹੋਣ ਤੋਂ ਬਾਅਦ ਔਫ਼ਲਾਈਨ ਕੰਮ ਕਰਦਾ ਹੈ
ਪ੍ਰੀਸੈੱਟ

ਟਿਪ: ਪ੍ਰੀਵਿਊ ਵਿੱਚ ਕਿਸੇ ਆਈਟਮ 'ਤੇ ਕਲਿੱਕ ਕਰੋ ਤਾਂ ਜੋ ਇਸ 'ਤੇ flex-grow: 1 ਨੂੰ ਟੌਗਲ ਕੀਤਾ ਜਾ ਸਕੇ।

ਲਾਈਵ ਪ੍ਰੀਵਿਊ
css
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}
html
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

🔒 ਸਭ ਕੁਝ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਚੱਲਦਾ ਹੈ — ਕੁਝ ਵੀ ਅੱਪਲੋਡ ਨਹੀਂ ਹੁੰਦਾ।

ਇਹ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ

ਇੱਕ ਇੰਟਰੈਕਟਿਵ flexbox playground: flex-direction, wrap, justify-content ਅਤੇ align-items ਬਦਲੋ ਅਤੇ 10 ਤੱਕ ਲਾਈਵ items ਨੂੰ ਤੁਰੰਤ ਮੁੜ ਸਜਦੇ ਵੇਖੋ। ਕਿਸੇ ਵੀ item ਨੂੰ flex-grow: 1 ਦੇਣ ਲਈ ਉਸ 'ਤੇ ਕਲਿੱਕ ਕਰੋ ਅਤੇ ਵੇਖੋ ਕਿ ਇਹ ਥਾਂ ਕਿਵੇਂ ਲੈਂਦਾ ਹੈ। CSS ਲਾਈਵ ਅੱਪਡੇਟ ਹੁੰਦੀ ਹੈ, ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਕਾਪੀ ਲਈ ਤਿਆਰ।

  1. 1
    Container ਸੈੱਟ ਕਰੋ
    Direction, wrap, justify-content, align-items, gap।
  2. 2
    Items ਜੋੜੋ
    ਇੱਕ ਤੋਂ ਦਸ ਨੰਬਰ ਵਾਲੇ flex items।
  3. 3
    ਤਜਰਬਾ ਕਰੋ
    flex-grow ਬਦਲਣ ਅਤੇ ਅਸਰ ਵੇਖਣ ਲਈ item 'ਤੇ ਕਲਿੱਕ ਕਰੋ।
  4. 4
    CSS ਕਾਪੀ ਕਰੋ
    Container (ਅਤੇ item) rules, ਪੇਸਟ ਲਈ ਤਿਆਰ।

ਸਭ ਕੁਝ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਚੱਲਦਾ ਹੈ — ਕੁਝ ਵੀ ਅੱਪਲੋਡ ਨਹੀਂ ਹੁੰਦਾ।

ਸੰਬੰਧਿਤ ਟੂਲ

🟦

CSS ਗ੍ਰਿਡ ਜਨਰੇਟਰ

CSS ਗ੍ਰਿਡ ਨੂੰ ਵਿਜ਼ੂਅਲੀ ਡਿਜ਼ਾਈਨ ਕਰੋ — ਟ੍ਰੈਕ, ਯੂਨਿਟ ਅਤੇ ਗੈਪ — ਅਤੇ ਜਨਰੇਟ ਕੀਤਾ CSS ਤੇ HTML ਕਾਪੀ ਕਰੋ।

ਇਸ ਨੂੰ ਅਜ਼ਮਾਓ
🎨

CSS ਬਾਕਸ ਸ਼ੈਡੋ ਜਨਰੇਟਰ

ਲਾਈਵ ਪ੍ਰੀਵਿਊ, ਮਲਟੀ-ਲੇਅਰ ਸਟੈਕਿੰਗ, ਰੰਗ ਚੋਣਕਾਰ, ਇਨਸੈੱਟ ਟੌਗਲ, ਅਤੇ ਇੱਕ-ਕਲਿੱਕ ਕਾਪੀ ਨਾਲ CSS box-shadow ਲਈ ਵਿਜ਼ੁਅਲ ਬਿਲਡਰ। Material, ਨਿਊਮੌਰਫਿਜ਼ਮ, ਅਤੇ ਗਲੋ ਪ੍ਰੀਸੈੱਟ ਸ਼ਾਮਲ ਹਨ।

ਇਸ ਨੂੰ ਅਜ਼ਮਾਓ
◖

CSS ਬਾਰਡਰ ਰੇਡੀਅਸ ਜਨਰੇਟਰ

ਹਰ ਕੋਨੇ 'ਤੇ ਸੁਤੰਤਰ ਨਿਯੰਤਰਣ ਨਾਲ ਗੋਲ ਕੋਨੇ ਵਿਜ਼ੁਅਲੀ ਡਿਜ਼ਾਈਨ ਕਰੋ। ਜੈਵਿਕ ਬਲੌਬ ਆਕਾਰਾਂ ਲਈ ਅੰਡਾਕਾਰ X/Y ਸਿੰਟੈਕਸ ਸਮਰਥਿਤ ਹੈ।

ਇਸ ਨੂੰ ਅਜ਼ਮਾਓ

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