Flexbox-generaattori

Määritä flex-säiliö ja sen elementit visuaalisilla ohjaimilla, seuraa asettelun muutoksia reaaliajassa ja kopioi CSS yhdellä klikkauksella.

Esiasetukset
Säiliö (Container)
Suunta (Direction)
Rivitys (Wrap)
Justify content
Align items
Elementit
Elementti 1
Align self
CSS
Muotoile asettelua säätämällä säiliötä ja elementtejä.

Asettelusi luodaan suoraan selaimessasi. Mitään tekemiäsi asetuksia ei lähetetä BroBroGo-palveluun.

UKK

Mitä eroa on justify-content- ja align-items-ominaisuuksilla?

Justify-content asettaa elementit pääakselin suuntaisesti – eli rivin tai sarakkeen kulkusuunnassa – kun taas align-items sijoittaa ne poikittaisakselille. Kun vaihdat suunnan rivistä sarakkeeksi, nämä kaksi akselia vaihtavat paikkaa, jolloin justify-content alkaa toimia ylhäältä alas ja align-items vasemmalta oikealle.

Miten elementtikohtaiset säädöt toimivat?

Valitse elementti sen numeron perusteella ja määritä sitten, kuinka paljon se kasvaa täyttääkseen vapaan tilan (grow), kuinka paljon se kutistuu tilan ollessa tiukka (shrink), sen aloitusleveys (basis) ja sen oma kohdistus poikittaisakselilla. Järjestys (order) siirtää elementtiä aiemmaksi tai myöhemmäksi näytöllä koskematta HTML-koodiin. Vain ne elementit, joita todella muutat, saavat oman sääntönsä CSS-koodiin.

Milloin wrap- ja align-content-ominaisuuksilla on merkitystä?

Kun rivitys (wrap) on pois päältä, jokainen elementti pakotetaan yhdelle riville ja niitä voidaan puristaa kapeammiksi. Kun otat sen käyttöön, elementit, jotka eivät enää mahdu, siirtyvät seuraavalle riville – tällöin align-content astuu kuvaan ja määrittää rivien välit ryhmänä. Gap asettaa elementtien ja rivien välisen etäisyyden ilman ulkovälejä (margin).

CSS Cubic Bezier -generaattoriMuotoile kevennyskäyrää vetämällä kahta kahvaa, seuraa pisteen liikettä suhteessa tasaisen nopeaan ja kopioi cubic-bezier()-arvo.Border Radius -generaattoriPyöristä kulmat liukusäätimillä, luo orgaanisia muotoja elliptisellä tilalla ja kopioi CSS-koodi heti.Box Shadow -generaattoriSäädä laatikon varjoa liukusäätimillä, pinoa tasoja syvyyden luomiseksi ja kopioi valmis CSS-koodi heti.Liukuväri-generaattoriLuo lineaarinen, säteittäinen tai kartiomainen liukuväri, lisää väripisteitä ja aseta suunta, ja kopioi sitten CSS yhdellä klikkauksella.CSS Grid -generaattoriMääritä sarakkeet ja rivit, vedä solujen yli sijoittaaksesi elementtejä ja kopioi grid-CSS sekä vastaava HTML yhdellä klikkauksella.CSS clamp() -laskuriSyötä koko pienille ja suurille näytöille ja saat joustavan clamp()-arvon, joka skaalautuu sujuvasti niiden välillä – sopii fonttikoille, sisällyksille tai väleille.VärimuunninMuunna värejä muotojen HEX, RGB, HSL, HSV, CMYK ja LAB välillä – muokkaa mitä tahansa kenttää ja muut päivittyvät reaaliajassa.