Flex-flow - CSS-tricks

Anonim

Den flex-flowegenskab er en sub-egenskab af Flexible Box layout modul.

Det er en stenografi for flex-directionog flex-wrap.

Syntaks

flex-flow: || .flex-container ( flex-flow: row wrap; )

Du kan angive en eller to værdier, uanset rækkefølgen.

Demo

Begge lister opfører sig nøjagtigt på samme måde:

  • Den blå har flex-direction: rowogflex-wrap: wrap
  • Den røde har flex-flow: row wrap
Tjek denne pen!

Browsersupport

  • (moderne) betyder den nylige syntaks fra specifikationen (f.eks. display: flex;)
  • (hybrid) betyder en ulige uofficiel syntaks fra 2011 (f.eks. display: flexbox;)
  • (gammel) betyder den gamle syntaks fra 2009 (f.eks. display: box;)
Chrome Safari Firefox Opera IE Android iOS
21+ (moderne)
20- (gamle)
3.1+ (gammel) 2-21 (gammel)
22+ (ny)
12.1+ (moderne) 10+ (hybrid) 2.1+ (gammel) 3.2+ (gammel)

Blackberry browser 10+ understøtter den nye syntaks.

For mere information om, hvordan man blander syntakser for at få den bedste browsersupport, henvises til denne artikel (CSS-Tricks) eller denne artikel (DevOpera).