ප්‍රධාන අන්තර්ගතයට පිවිසෙන්න
LibraTool logoLibraTool

නොමිලේ CSS ෆ්ලෙක්ස්බොක්ස් උත්පාදකය

flex direction, wrap, justify සහ align ට විෂ්‍යය කරන්න ලයිව් items වලට — සහ CSS පිටපත් කරන්න।

load වූ පසු offline ක්‍රියා කරයි
පූර්ව සිටුවම්

ඉඟිය: පෙරදසුනේ අයිතමයක් ක්ලික් කර එහි 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 මාරු කර items 10ක් දක්වා ක්ෂණිකව නැවත සකසන ආකාරය බලන්න. එයට flex-grow: 1 ලබාදීමට ඕනෑම item එකක් click කර එය ඉඩ claim කරන ආකාරය බලන්න. CSS සජීවීව යාවත්කාලීන වේ, ඔබේ project එකට paste කිරීමට සූදානම්.

  1. 1
    container එක සකසන්න
    දිශාව, wrap, justify-content, align-items, gap.
  2. 2
    items එකතු කරන්න
    flex items අංකගත එකක සිට දහයක් දක්වා.
  3. 3
    පරීක්ෂණයක් කරන්න
    flex-grow toggle කිරීමට සහ effect එක බැලීමට item එකක් click කරන්න.
  4. 4
    CSS පිටපත් කරන්න
    container (සහ item) rules, paste කිරීමට සූදානම්.

සියල්ල ඔබේ බ්‍රවුසරයේ ධාවනය වේ — කිසිවක් උඩුගත නොවේ.

සම්බන්ධ මෙවලම්

🟦

CSS ග්‍රිඩ් උත්පාදකය

CSS grid ඉතිරිවීමින් නිර්මාණ කරන්න — tracks, units සහ gaps — සහ generated CSS සහ HTML පිටපත් කරන්න।

උත්සාහ කරන්න
🌈

CSS Gradient සකසන්නා

සජීව පෙරදසුනක් සමඟ රේඛීය, රේඩියල් සහ කෝනික CSS gradients සාදන්න. CSS එක් ක්ලික් එකෙන් පිටපත් කරන්න.

උත්සාහ කරන්න
🎨

CSS Box Shadow සකසන්නා

සජීව පෙරදසුන, බහු-ස්ථර ස්ථාපනය, වර්ණ picker, inset toggle සහ එක් ක්ලික් පිටපත් කිරීම සහිත CSS box-shadow දෘශ්‍ය නිර්මාතෘ. Material, neumorphism සහ glow presets ඇතුළත් ය.

උත්සාහ කරන්න

නිතර අසන ප්‍රශ්න