Léim go dtí an príomhábhar
LibraTool logoLibraTool

Giniúradh Flexbox CSS saor in aisce

Déan tástála ar threo flex, foluain, comhordú agus ailínithe ar mhíreanna beo — agus cóipeáil an CSS.

Oibríonn as líne nuair a lódáiltear é
Réamhshocruitheoirí

Leideanna: cliceáil míre san réamhamharc a bhailíochtú flex-grow: 1 air.

Réamhamharc beo
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>

🔒 Ritheann gach rud i do bhróimséara — ní uachtar rud ar bith.

Conas a Oibríonn sé

Clós súgartha idirghníomhach flexbox: athraigh flex-direction, wrap, justify-content agus align-items agus féach suas le 10 mír bheo á n-athshocrú láithreach. Cliceáil ar aon mhír chun flex-grow: 1 a thabhairt di agus féach mar a éilíonn sí spás. Nuashonraíonn an CSS go beo, réidh le cóipeáil isteach i do thionscadal.

  1. 1
    Socraigh an coimeádán
    Treo, wrap, justify-content, align-items, gap.
  2. 2
    Cuir míreanna leis
    Míreanna flex uimhrithe a haon go deich.
  3. 3
    Triail
    Cliceáil ar mhír chun flex-grow a athrú agus féach an éifeacht.
  4. 4
    Cóipeáil an CSS
    Na rialacha coimeádáin (agus míre), réidh le greamú.

Ritheann gach rud i do bhrabhsálaí — ní uaslódáiltear aon rud.

Uirlisí Gaolmhara

🟦

Giniúradh Ghréine CSS

Dearadh CSS gréine go radharcach — rianta, aonaid agus bhearna — agus cóipeáil an CSS agus HTML a ghintear.

Bain triail as
🌈

Gineadóir Grádáin CSS

Cruthaigh grádáin CSS líneacha, radacha, agus cónach le réamhamharc beo. Cóipeáil an CSS le haon chliceáil.

Bain triail as
🎨

Gineadóir Scáth Bosca CSS

Tógálaí amhairc le haghaidh box-shadow CSS le réamhamharc beo, cruachú il-shraitheanna, roghnaí datha, scoránú inmheánach, agus cóipeáil le haon chliceáil. Cuimsíonn réamhshocruithe Ábhair, neomuirfóis, agus lonraithe.

Bain triail as

Ceisteanna Coitianta