Անցնել հիմնական բովանդակությանը
LibraTool logoLibraTool

CSS Flexbox Գեներատոր անվճար

Փորձեք flex ուղղությունը, փաթեթը, հիմնավորումը և հավասարեցումը իրական տարրերի վրա — և պատճեն անեք CSS-ը:

Աշխատում է անցանց՝ բեռնվելուց հետո
Նախահատկերներ

Ակնարկ: նախադիտման մեջ տարրի վրա կտտացրեք, որ toggle անեք 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 Grid Գեներատոր

Վիզուալ ներածեք CSS grid — հետքեր, միավորներ և բացեր — և պատճեն անեք ստեղծված CSS և HTML:

Փորձեք այն
🌈

CSS գրադիենտի գեներատոր

Ստեղծեք գծային, ռադիալ ու կոնիկ CSS գրադիենտներ ուղիղ նախադիտմամբ: Մեկ սեղմումով պատճենեք CSS-ը:

Փորձեք այն
🎨

CSS box-shadow գեներատոր

CSS box-shadow-ի վիզուալ կառուցիչ ուղիղ նախադիտմամբ, բազմաշերտ կուտակմամբ, գույնի ջրվեժով, inset անջատիչով ու մեկ սեղմումով պատճենով: Ներառում է Material, neumorphism ու փայլ կանխադրածներ:

Փորձեք այն

Հաճախակի տրվող հարցեր