LibraTool logoLibraTool

Bepul CSS Flexbox generatori

Jonli elementlarda flex yo'nalishi, o'ralishi, tekislanishi bilan tajriba o'tkazing — va CSS ni nusxalang.

Yuklangandan keyin oflayn ishlaydi
Tayyor sozlamalar

Maslahat: unga flex-grow: 1 qo'yish uchun ko'rinishdagi elementni bosing.

Jonli ko'rinish
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>

🔒 Hammasi brauzeringizda ishlaydi — hech narsa yuklanmaydi.

Qanday ishlaydi

Interaktiv flexbox o'yin maydoni: flex-direction, wrap, justify-content va align-items ni almashtiring va 10 tagacha jonli elementning darhol qayta joylashishini kuzating. Har qanday elementga flex-grow: 1 berish uchun bosing va u qanday joy egallashini ko'ring. CSS jonli yangilanadi, loyihangizga nusxalashga tayyor.

  1. 1
    Konteynerni o'rnating
    Yo'nalish, wrap, justify-content, align-items, bo'shliq.
  2. 2
    Elementlar qo'shing
    Bitta dan o'ntagacha raqamlangan flex elementi.
  3. 3
    Tajriba o'tkazing
    flex-grow'ni almashtirish va effektni ko'rish uchun elementni bosing.
  4. 4
    CSS'ni nusxalang
    Konteyner (va element) qoidalari, joylashtirishga tayyor.

Hammasi brauzeringizda ishlaydi — hech narsa yuklanmaydi.

Tegishli asboblar

🟦

CSS Grid generatori

CSS gridni vizual tarzda loyihalang — tracklar, birliklar va oraliqlar — va yaratilgan CSS hamda HTML ni nusxalang.

Sinab ko'ring
🎨

CSS Soya Effekti Generatori

Jonli oldindan ko'rish, ko'p qatlamli stacking, rang tanlagich, ichki (inset) o'zgartirgich va bir bosishda nusxalash bilan CSS box-shadow uchun vizual quruvchi. Material, neumorfizm va porlash tayyor variantlarini o'z ichiga oladi.

Sinab ko'ring
◖

CSS Burchak Radiusi Generatori

Har bir burchakni mustaqil boshqarish bilan dumaloq burchaklarni vizual tarzda loyihalang. Organik tomchi shakllar uchun elliptik X/Y sintaksisini qo'llab-quvvatlaydi.

Sinab ko'ring

Ko'p so'raladigan savollar