CSS flex-flow ominaisuus

Määrittely ja käyttö

flex-flow-ominaisuus on seuraavien ominaisuuksien lyhennetty muoto:

huomautus:Jos elementti ei ole joustava elementti, flex-ominaisuus on epäsyöttö

Lisäksi:

CSS-opetusohjelma:CSS-joustavuuskehys

CSS -viittausoppikirja:flex-ominaisuus

CSS -viittausoppikirja:flex-direction-ominaisuus

CSS -viittausoppikirja:flex-basis-ominaisuus

CSS -viittausoppikirja:flex-grow-ominaisuus

CSS -viittausoppikirja:flex-shrink-ominaisuus

CSS -viittausoppikirja:flex-wrap-ominaisuus

HTML DOM -viittausoppikirja:flexFlow-ominaisuus

esimerkki

Näytä joustavat elementit vastakkaisessa suunnassa ja rivitä tarvittaessa:

div {
  display: flex;
  flex-flow: row-reverse wrap;
}

Kokeile itse

CSS-kieli

flex-flow: flex-direction flex-wrap|initial|inherit;

ominaisuusarvo

arvo kuvaus
flex-direction

Mahdolliset arvot:

  • row
  • row-reverse
  • column
  • column-reverse
  • initial
  • inherit

Oletusarvo on "row".

Määrittää joustavien elementtien suunta.
flex-wrap

Mahdolliset arvot:

  • nowrap
  • wrap
  • wrap-reverse
  • initial
  • inherit

Oletusarvo on "nowrap".

Määrittää, tulisiko joustavien elementtien olla uudelleenrivitetty.
initial Aseta tämä ominaisuus sen oletusarvon arvoon. Katso: initial.
inherit Perii tämän ominaisuuden isältään. Katso: inherit.

Tekninen yksityiskohta

Oletusarvo: row nowrap
Perintä: Ei
Animaation tekeminen: Ei tuettu. Katso:Animaatiot.
Versio: CSS3
JavaScript-kieli: object.style.flexFlow="column nowrap"

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen selaimen version, joka tukee täyttä ominaisuutta.

Taulukossa olevat numerot osoittavat ensimmäisen selaimen version, joka tukee tätä ominaisuutta käyttämällä etuliitteitä -webkit-, -ms- tai -moz-.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0