Luo Täydelliset Flexbox-asettelut

Visualisoi, mukauta ja luo CSS flexbox -koodia intuitiivisella vedä ja pudota -käyttöliittymällämme. Luo

Säilön ominaisuudet

Kohteen ominaisuudet

3 items

Preview

Item 1
Item 2
Item 3
.flex-container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch; }  .flex-item { /* Default item styles */ flex: 0 1 auto; order: 0; align-self: auto; }
Luomittu CSS-koodi

Suositut Flexbox-esiasetukset

Keskitä vaaka- ja pystysuunnassa

Content

Täydellinen logon, painikkeen tai minkä tahansa elementin keskittämiseen sekä vaaka- että pystysuunnassa.

Yhtä suuri väli

Item 1
Item 2
Item 3

Luo yhtä suuri etäisyys elementtien välille ja välilyönnillä.

Pystysuuntainen valikko

Home
About
Contact

Rakenna pystysuuntainen navigointivalikko, jossa on yhtenäinen väli ja kohdistus.

Responsiivinen ruudukko

Box 1
Box 2
Box 3
Box 4
Box 5

Luo responsiivinen ruudukkoasettelu, joka rivittää kohteet käytettävissä olevan tilan perusteella.

Sankaribanneri

Pääotsikko

Sankari-osio, jossa on toimintakehotus

Suunnittele sankaribanneri, jossa on otsikko, tekstitys ja toimintakehotuspainike.

Alatunnisteen asettelun

Company

About Us

Careers

Support

ohjekeskus

Ota yhteyttä

© 2023 Flexbox Generator

Rakenna responsiivinen alatunniste, jossa on sarakkeita, jotka pinoutuvat pienemmille näytöille.

Tosielämän esimerkkejä

Navigointipalkki

Logo
Home
Products
About
Contact

Yleinen navigointipalkin asettelu, jossa logo on vasemmalla, valikkokohdat keskellä ja ostoskorikuvake oikealla.

Card Grid

otsikkokortin

kuvausteksti tähän

Kortti Otsikkokortin

kuvausteksti tähän

Kortin otsikkokortin

kuvausteksti tähän

Responsiivinen korttiruudukko, joka mukautuu eri näyttökokoihin flexbox-ominaisuuksien avulla.

Artikkelin asettelu

Artikkelin otsikko

Lähetetty 1. tammikuuta 2023 · 5 min Lue

artikkelin sisältö täältä. Tämä voi olla lyhyt yhteenveto tai koko artikkelin teksti. Flexbox auttaa kohdistamaan kuvan ja tekstin visuaalisesti houkuttelevalla tavalla.

Yleinen artikkelin asettelu, jossa on kuva vasemmalla ja tekstisisältö oikealla, pinottuna mobiililaitteisiin.

Kojelaudan asettelun

Header
Sidebar
pääsisällöstä
Footer

Kojelaudan asettelu, jossa on ylätunniste, sivupalkki, pääsisältöalue ja alatunniste, joka käyttää flexboxia sekä vaaka- että pystysuuntaiseen tasaukseen.

Flexboxin perusteet

Mikä on Flexbox?

Joustava laatikkoasettelu, joka tunnetaan yleisesti nimellä Flexbox, on CSS3-asettelumalli, joka tarjoaa tehokkaan tavan jakaa ja kohdistaa tilaa kontin kohteiden kesken, vaikka niiden koko olisi tuntematon tai dynaaminen.

The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes).

Keskeiset käsitteet:Flexbox esittelee kaksi pääkonseptia:flex container and the flex -tuotteet. Säilö on pääelementti, ja alkiot ovat sen suoria alielementtejä.

Pääakseli vs. poikkiakseli

Flexbox-asettelut perustuvat kahteen akseliin:main axis and the poikkiakseli.

  • Pääakseli:Ensisijainen akseli, jota pitkin joustokohteet asetetaan. Määriteltyflex-direction.
  • poikkiakselilla:Akseli, joka on kohtisuorassa pääakseliin nähden. Sen suunta riippuu pääakselin suunnasta.
Pääakselin →←
Ristiakselin
Start
Main
End

säilön ominaisuudet

Property Description
display Määrittää joustavan säilön; rivin tai lohkon annetun arvon mukaan.
flex-direction Määrittää pääakselin ja määrittää siten suunnan, johon flex-nimikkeet sijoitetaan flex-säilöön.
flex-wrap Oletusarvoisesti kaikki flex-nimikkeet yrittävät mahtua yhdelle riville. Voit muuttaa sitä ja sallia kohteiden rivityksen tarpeen mukaan tämän ominaisuuden avulla.
justify-content Tasaa flex-nimikkeet flex-säilön nykyisen viivan pääakselia pitkin.
align-items Tasaa flex-nimikkeet flex-säilön nykyisen viivan poikkiakselia pitkin.
align-content Tasaa flex-säilön viivat sisälle, kun poikkiakselilla on ylimääräistä tilaa.

Nimikkeen ominaisuudet

Property Description
order Liukuvat nimikkeet asetetaan oletusarvoisesti lähdejärjestykseen.orderOminaisuus kuitenkin ohjaa järjestystä, jossa ne näkyvät liukumasäilössä.
flex-grow Määrittää joustonimikkeen mahdollisuuden kasvaa tarvittaessa. Se hyväksyy yksiköttömän arvon, joka toimii suhteellisuutena.
flex-shrink Määrittää joustonimikkeen mahdollisuuden kutistua tarvittaessa.
flex-basis Määrittää liukuma-nimikkeen alkuperäisen koon, ennen kuin käytettävissä oleva tila jaetaan joustavuuskertoimien mukaan.
align-self Sallii oletustasauksen (tai määrittämänalign-items) ohittaa yksittäisten joustonimikkeiden osalta.

Related Tools

Kynän muunnos CSS-muotoon

Muunna SCSS-koodisi CSS:ksi. Nopeaa, helppoa ja turvallista.

SCSS:stä CSS:ksi muunnin

Muunna SCSS-koodisi CSS:ksi. Nopeaa, helppoa ja turvallista.

Sass:sta CSS:ksi muunnin

Muunna Sass-koodisi CSS:ksi. Nopeaa, helppoa ja turvallista.

CMYK RGB:ksi

varten Muunna CMYK-väriarvot RGB-muotoon digitaalisia sovelluksia

Muunna JSON CSV-muotoon

Liitä JSON-tietosi alla ja muunna ne CSV-muotoon yhdellä napsautuksella.

Jännitemuunnin

Muunna sähköjännite eri yksiköiden välillä tarkasti ja helposti