Neidio i'r prif gynnwys
LibraTool logoLibraTool

Generadur CSS Flexbox am ddim

Arbrofi gyda chyfeiriad flex, lapio, cyfiawnhau ac alinio ar eitemau byw — ac copïo'r CSS.

Yn gweithio all-lein ar ôl llwytho
Rhagosodiadau

Awgrym: cliciwch eitem yn y rhagolwg i ddynodi flex-grow: 1 iddi.

Rhagolwg byw
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>

🔒 Mae popeth yn rhedeg yn eich porwr — ni chaiff dim ei uwchlwytho.

Sut Mae'n Gweithio

Maes chwarae flexbox rhyngweithiol: newidiwch flex-direction, wrap, justify-content ac align-items a gwyliwch hyd at 10 eitem fyw yn aildrefnu ar unwaith. Cliciwch unrhyw eitem i roi flex-grow: 1 iddi a gweld sut mae'n hawlio lle. Mae'r CSS yn diweddaru'n fyw, yn barod i'w gopïo i'ch prosiect.

  1. 1
    Gosodwch y cynhwysydd
    Cyfeiriad, lapio, justify-content, align-items, bwlch (gap).
  2. 2
    Ychwanegu eitemau
    Un i ddeg eitem flex wedi'u rhifo.
  3. 3
    Arbrofi
    Cliciwch eitem i doglo flex-grow a gweld yr effaith.
  4. 4
    Copïo'r CSS
    Rheolau'r cynhwysydd (a'r eitem), yn barod i'w gludo.

Mae popeth yn rhedeg yn eich porwr — nid oes dim yn cael ei uwchlwytho.

Offer Cysylltiedig

🟦

Generadur CSS Grid

Dylunio CSS grid yn ddeiliadol — traciau, unedau a bylchau — ac copïo'r CSS a HTML a gynhyrchwyd.

Rhowch gynnig arni
🌈

Generadur Graddiant CSS

Crëwch raddiannau CSS llinol, radial, a conig gyda rhagolwg byw. Copïo'r CSS gydag un clic.

Rhowch gynnig arni
🎨

Generadur Cysgod Blwch CSS

Adeiladwr gweledol ar gyfer box-shadow CSS gyda rhagolwg byw, haenu aml-haen, dewiswyr lliw, toglo mewnol, a chopïo un-clic. Yn cynnwys rhagosodiadau Material, neumorffiaeth, a glow.

Rhowch gynnig arni

Cwestiynau Cyffredin