Fara beint í aðalefni
LibraTool logoLibraTool

CSS Flexbox framleiðandi — ókeypis

Tilrauna með flex stefnu, vefingu, réttlætingu og samhæfingu á lifandi hlutum — og afritaðu CSS.

Virkar án nettengingar eftir hleðslu
Forstillingar

Ábending: smelltu á atriði í forskoðun til að vexti flex-grow: 1 á það.

Lifandi forskoðun
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>

🔒 Allt keyrir í þínum vafra — ekkert er hlaðið upp.

Hvernig það virkar

Gagnvirkur flexbox-leikvöllur: skiptu um flex-direction, wrap, justify-content, og align-items og horfðu á allt að 10 lifandi atriði endurraðast samstundis. Smelltu á hvaða atriði sem er til að gefa því flex-grow: 1 og sjáðu hvernig það krefst rýmis. CSS-ið uppfærist lifandi, tilbúið til að afrita í verkefnið þitt.

  1. 1
    Stilltu gámann
    Stefna, umbrot, justify-content, align-items, bil.
  2. 2
    Bættu við atriðum
    Eitt til tíu númeruð flex-atriði.
  3. 3
    Gerðu tilraunir
    Smelltu á atriði til að víxla flex-grow og sjá áhrifin.
  4. 4
    Afritaðu CSS-ið
    Gám- (og atriða-) reglurnar, tilbúnar til að líma.

Allt keyrir í vafranum þínum — ekkert er sent upp.

Tengd verkfæri

🟦

CSS Grid framleiðandi

Hannstu CSS hnitakerfi með sjónrænum hætti — brautir, einingar og bila — og afritaðu mynduðu CSS og HTML.

Prófaðu það
🌈

CSS-þrepasmiður

Búðu til línulegar, hringlægar og kónískar CSS-þrepur með beinni forskoðun. Afritaðu CSS með einum smelli.

Prófaðu það
🎨

CSS kassaskuggasmiður

Sjónlægur smiður fyrir CSS box-shadow með beinni forskoðun, marglagsstafla, litatvelja, innsetninga-skiptur og eins-smella-afritun. Inniheldur Material, neumorphism og glóðuforstillingar.

Prófaðu það

Algengar spurningar