LibraTool logoLibraTool

Gjenerues CSS Flexbox Falas

Eksperimento me drejtimin flex, mbështjelljen, justifikimin dhe rreshtimin në elemente të drejtpërdrejta — dhe kopjo CSS-në.

Funksionon jashtë linje sapo ngarkohet
Paracaktime

Këshillë: kliko një element në pamjen paraprake për të ndryshuar flex-grow: 1 mbi të.

Pamje paraprake e drejtpërdrejtë
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>

🔒 Gjithçka funksionon në shfletuesin tënd — asgjë nuk ngarkohet.

Si funksionon

Një fushë loje interaktive flexbox: ndërro flex-direction, wrap, justify-content, dhe align-items dhe shiko deri 10 elemente të drejtpërdrejta të riorganizohen menjëherë. Kliko çdo element për t'i dhënë flex-grow: 1 dhe shiko si e pretendon hapësirën. CSS-ja përditësohet drejtpërdrejt, gati për t'u kopjuar në projektin tënd.

  1. 1
    Vendos kontejnerin
    Drejtim, wrap, justify-content, align-items, hapësirë.
  2. 2
    Shto elemente
    Një deri dhjetë elemente flex të numëruar.
  3. 3
    Eksperimento
    Kliko një element për të ndërruar flex-grow dhe shiko efektin.
  4. 4
    Kopjo CSS-në
    Rregullat e kontejnerit (dhe elementit), gati për t'u ngjitur.

Gjithçka funksionon në shfletuesin tënd — asgjë nuk ngarkohet.

Mjete të ngjashme

🟦

Gjenerues Rrjeti CSS

Dizajno vizualisht një rrjet CSS — shina, njësi dhe zbrazëtira — dhe kopjo CSS-në dhe HTML-në e gjeneruar.

Provojeni
🎨

Gjenerues CSS Box Shadow

Ndërtues vizual për CSS box-shadow me parashikim të drejtpërdrejtë, shtresim me shumë nivele, zgjedhës ngjyrash, çelës inset dhe kopjim me një klik. Përfshin preseta Material, neumorfizëm dhe shkëlqim.

Provojeni
◖

Gjenerues CSS Border Radius

Projektoni vizualisht qoshe të rrumbullakosura me kontroll të pavarur për çdo qoshe. Mbështet sintaksën eliptike X/Y për forma organike blob.

Provojeni

Pyetjet e bëra më shpesh