Pāriet uz galveno saturu
LibraTool logoLibraTool

CSS Flexbox ģenerators bez maksas

Eksperimentējiet ar flex virzienu, apvītošanu, justify un align uz tiešajiem elementiem — un kopējiet CSS.

Darbojas bezsaistē pēc ielādes
Priekšiestatījumi

Padoms: noklikšķiniet uz elementa priekšskatījumā, lai pārslēgtu flex-grow: 1 uz tā.

Tiešraides priekšskatījums
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>

🔒 Viss darbojas jūsu pārlūkprogrammā — nekas netiek augšupielādēts.

Kā tas darbojas

Interaktīvs flexbox spēļu laukums: pārslēdziet flex-direction, wrap, justify-content un align-items un vērojiet, kā līdz 10 dzīvi vienumi uzreiz pārkārtojas. Noklikšķiniet uz jebkura vienuma, lai piešķirtu tam flex-grow: 1, un redziet, kā tas prasa vietu. CSS atjaunojas dzīvajā laikā, gatavs kopēšanai jūsu projektā.

  1. 1
    Iestatiet konteineru
    Virziens, wrap, justify-content, align-items, atstarpe.
  2. 2
    Pievienojiet vienumus
    No viena līdz desmit numurētiem flex vienumiem.
  3. 3
    Eksperimentējiet
    Noklikšķiniet uz vienuma, lai pārslēgtu flex-grow un redzētu efektu.
  4. 4
    Kopējiet CSS
    Konteinera (un vienuma) noteikumi, gatavi ielīmēšanai.

Viss darbojas jūsu pārlūkprogrammā — nekas netiek augšupielādēts.

Saistītie rīki

🟦

CSS režģa ģenerators

Vizuāli noformējiet CSS režģi — sliedes, vienības un spraugas — un kopējiet ģenerēto CSS un HTML.

Izmēģināt
🌈

CSS gradienta ģenerētājs

Izveido lineārus, radiālus un koniskus CSS gradientus ar tiešraides priekšskatījumu. Kopē CSS ar vienu klikšķi.

Izmēģināt
🎨

CSS lodziņa ēnas ģenerētājs

Vizuālais CSS box-shadow veidotājs ar tiešraides priekšskatījumu, vairāku slāņu kārtošanu, krāsu izvēlētāju, ielikuma pārslēgšanu un vienas pogas kopēšanu. Ietver Material, neiromorfisma un mirdzuma iepriekšiestatījumus.

Izmēģināt

Bieži uzdotie jautājumi