Pereiti prie pagrindinio turinio
LibraTool logoLibraTool

CSS Flexbox generatorius nemokamai

Eksperimentuokite su flex kryptimi, vyniojimu, išdėstymu (justify) ir lygiavimu (align) gyvuose elementuose – ir nukopijuokite CSS.

Veikia neprisijungus, kai įkeliama
Numatytosios parinktys

Patarimas: spustelėkite elementą peržiūroje, kad jame perjungtumėte flex-grow: 1.

Tiesioginė peržiūra
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>

🔒 Viskas veikia jūsų naršyklėje – nieko nėra išsiunčiama.

Kaip tai veikia

Interaktyvi flexbox žaidimų aikštelė: perjunginėkite flex-direction, wrap, justify-content ir align-items ir stebėkite, kaip akimirksniu pertvarkosi iki 10 gyvų elementų. Spustelėkite bet kurį elementą, kad suteiktumėte jam flex-grow: 1, ir pamatykite, kaip jis užima vietą. CSS atsinaujina gyvai, paruoštas kopijuoti į jūsų projektą.

  1. 1
    Nustatykite konteinerį
    Kryptį, wrap, justify-content, align-items, tarpą.
  2. 2
    Pridėkite elementų
    Nuo vieno iki dešimties sunumeruotų flex elementų.
  3. 3
    Eksperimentuokite
    Spustelėkite elementą, kad perjungtumėte flex-grow ir pamatytumėte efektą.
  4. 4
    Nukopijuokite CSS
    Konteinerio (ir elemento) taisykles, paruoštas įklijuoti.

Viskas vyksta jūsų naršyklėje — niekas neįkeliama.

Susiję įrankiai

🟦

CSS tinklelio generatorius

Vizualiai sukurkite CSS tinklelį – takelius, vienetus ir tarpus – ir nukopijuokite sugeneruotą CSS ir HTML.

Išbandykite
🌈

CSS gradiento generatorius

Kurkite linijinius, radialinius ir koninius CSS gradientus su gyvos peržiūros galimybe. Kopijuokite CSS vienu paspaudimu.

Išbandykite
🎨

CSS dėžutės šešėlio generatorius

Vizualinis CSS box-shadow kūrimo įrankis su tiesiogine peržiūra, kelių sluoksnių kaupimu, spalvų parinkikliu, vidinio šešėlio perjungikliu ir kopijavimu vienu paspaudimu. Apima „Material“, neomorfizmo ir švytėjimo šablonus.

Išbandykite

Dažnai užduodami klausimai