Joan eduki nagusira
LibraTool logoLibraTool

CSS Flexbox Sortzeaila doan

Esperimentatu flex norabidea, bilketa, justifikazioa eta lerroaketan zuzeneko elementuetan — eta kopiatu CSS.

Linez kanpo funtzionatzen du behin kargatuta
Aurrealdiak

Aholkua: klikatu ikustokian elementu bat flex-grow: 1 txandakatzeko.

Aurreikuspena zuzenean
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>

🔒 Guztia zure nabigailean doa — ez da nahigoa igotzen.

Nola Funtzionatzen Du

Flexbox jolasleku interaktibo bat: aldatu flex-direction, wrap, justify-content eta align-items eta ikusi 10 elementu bizi berrantolatuta berehala. Klikatu edozein elementu flex-grow: 1 emateko eta ikusteko nola aldarrikatzen duen tokia. CSSa bizirik eguneratzen da, zure proiektuan itsasteko prest.

  1. 1
    Ezarri edukiontzia
    Norabidea, wrap, justify-content, align-items, tartea.
  2. 2
    Gehitu elementuak
    Bat eta hamar bitarteko flex elementu zenbakidun.
  3. 3
    Esperimentatu
    Klikatu elementu bat flex-grow txandakatzeko eta efektua ikusteko.
  4. 4
    Kopiatu CSSa
    Edukiontzi (eta elementu) arauak, itsasteko prest.

Dena zure nabigatzailean funtzionatzen du — ezer ez da igotzen.

Erlazionatutako tresnak

🟦

CSS Sarearen Sortzeaila

Diseinatu ikustoki batean CSS sareak — pistak, unitateak eta tarteak — eta kopiatu sortutako CSS eta HTML.

Probatu
🌈

CSS Gradiente Sortzailea

Sortu lineala, erradiala eta konikoa CSS gradienteak zuzeneko aurrebistarekin. Kopiatu CSS klik batean.

Probatu
🎨

CSS Kutxa Itzal Sortzailea

CSS box-shadow-rako eraikitzaile bisuala zuzeneko aurrebistarekin, geruza anitzeko pilaketa, kolore-hautatzailea, sartuta-alternantzia eta klik bakarreko kopia. Material, neuromorfismo eta distira aurre-zehaztapenak barne.

Probatu

Maiz egiten diren galderak