Flexbox rafall

Settu upp flex-gám og einingar hans með myndrænum stýringum, sjáðu breytingarnar í rauntíma og afritaðu CSS-kóðann með einum smelli.

Forstillingar
Gámur (container)
Stefna
Línuskipting (wrap)
Jafna flæði (justify-content)
Jafna einingar (align-items)
Einingar
Eining 1
Jafna sjálft (align-self)
CSS
Breyttu gámnum og einingunum til að móta útlitið.

Útlitið er byggt beint í vafranum þínum. Engu af því sem þú stillir hér er hlaðið upp á BroBroGo.

Algengar spurningar

Hver er munurinn á justify-content og align-items?

Justify-content dreifir einingunum eftir aðalásnum — áttinni sem röðin eða dálkurinn flæðir í — á meðan align-items staðsetur þær þvert á hinn ásinn. Ef þú breytir stefnunni úr röð (row) í dálk (column) víxlast ásarnir tveir, þannig að justify-content fer að virka ofan frá og niður og align-items frá vinstri til hægri.

Hvernig virka stillingarnar fyrir hverja einingu?

Veldu einingu eftir númeri hennar og stilltu svo hversu mikið hún stækkar (grow) til að fylla laust pláss, hversu mikið hún minnkar (shrink) þegar þröngt er um hana, upphafsstærð hennar (basis) og eigin jöfnun þvert á ásinn. Röðun (order) færir einingu framar eða aftar á skjánum án þess að snerta HTML-kóðann. Aðeins þær einingar sem þú breytir fá sína eigin reglu í CSS-kóðanum.

Hvenær skipta wrap og align-content máli?

Þegar slökkt er á línuskiptingu (wrap) neyðast allar einingar á eina línu og geta þrengst saman. Þegar kveikt er á henni færast einingar sem komast ekki fyrir niður á næstu línu — það er þá sem align-content tekur við og stýrir bilinu á milli línanna sem heild. Gap stillir bilið á milli eininga og á milli lína, án þess að nota margin.

CSS Cubic Bezier rafallDragðu handföngin tvö til að móta hreyfisveigju, fylgstu með punktinum hreyfast og afritaðu cubic-bezier() gildið.Border Radius rafallRúnnaðu hvert horn með sleðum, búðu til lífræn form með eldingarlaga stillingu og afritaðu CSS-kóðann samstundis.Box Shadow rafallDragðu sleða til að móta box-shadow, raðaðu lögum til að skapa dýpt og afritaðu tilbúið CSS samstundis.Litagradíent rafallBúðu til línulegan, hringlaga eða keilulaga stigul, bættu við litastoppum, stilltu stefnuna og afritaðu CSS-kóðann með einum smelli.CSS Grid rafallStilltu dálka og raðir, dragðu yfir reitina til að staðsetja einingar og afritaðu grid-CSS ásamt samsvarandi HTML með einum smelli.CSS clamp() reiknivélSláðu inn stærð fyrir litla og stóra skjái og fáðu flæðandi clamp() gildi sem breytist mjúklega á milli — fyrir leturstærðir, spássíur eða bil.LitabreytirBreyttu litum á milli HEX, RGB, HSL, HSV, CMYK og LAB — breyttu hvaða reit sem er og hinir uppfærast jafnharðan.