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 لوبغالی: flex-direction، wrap، justify-content او align-items واړوئ او تر 10 ژوندي توکي سملاسي بیا-ترتیبیدل وګورئ. کوم توکی کیکاږئ ترڅو یې flex-grow: 1 ورکړئ او وګورئ چې دا ځای څنګه غوښتي. CSS ژوندی تازه کیږي، ستاسو پروژې ته کاپي کولو ته چمتو.

  1. 1
    ظرف تنظیم کړئ
    لوری، wrap، justify-content، align-items، واټن.
  2. 2
    توکي ورزیات کړئ
    یو تر لسو پورته شمېرل شوي flex توکي.
  3. 3
    تجربه کړئ
    یو توکی کیکاږئ ترڅو flex-grow بدل کړئ او اثر وګورئ.
  4. 4
    CSS کاپي کړئ
    ظرف (او توکی) قواعد، پیستلو ته چمتو.

هر څه ستاسو براوزر کې کیږي — هیڅ شی نه اپلوډیږي.

اړوندې وسیلې

🟦

د CSS ګرېډ جوړونکی

د CSS ګرېډ په لیدلو ډول ډیزاین کړئ — ټریکونه، واحدونه او درزونه — او جوړ شوی CSS او HTML کاپي کړئ.

هڅه یې وکړئ
🎨

د CSS Box Shadow تولیدونکی

د ژوندۍ مخکتنې، څو-پرت پرتلنې، رنگ ټاکونکي، انسیټ کچ، او یو-کلیک کاپي سره د CSS box-shadow لپاره لیدونی جوړونکی. د Material، نیومورفیزم، او ځلا تنظیمات شامل دي.

هڅه یې وکړئ
◖

د CSS Border Radius تولیدونکی

د هر کونج پر خپلواک کنترول سره ګرد کونجونه لیدونی ډیزاین کړئ. د عضوي بلوب شکلونو لپاره د بیضوي X/Y ترکیب ملاتړ کوي.

هڅه یې وکړئ

په مکرر ډول پوښتل شوې پوښتنې