Flex-flow - CSS-tricks

Anonim

Den flex-flowegenskapen är en sub-egenskap hos den flexibla Box Layout modul.

Det är en stenografi för flex-directionoch flex-wrap.

Syntax

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

Du kan ange ett eller två värden, oavsett ordning.

Demo

Båda listorna beter sig på exakt samma sätt:

  • Den blå har flex-direction: rowochflex-wrap: wrap
  • Den röda har flex-flow: row wrap
Kolla in den här pennan!

Webbläsarstöd

  • (modern) betyder den senaste syntaxen från specifikationen (t.ex. display: flex;)
  • (hybrid) betyder en udda inofficiell syntax från 2011 (t.ex. display: flexbox;)
  • (gammal) betyder den gamla syntaxen från 2009 (t.ex. display: box;)
Krom Safari Firefox Opera IE Android iOS
21+ (modern)
20- (gammal)		 3.1+ (gammal) 2-21 (gammal)
22+ (ny)		 12.1+ (modern) 10+ (hybrid) 2.1+ (gammal) 3.2+ (gammal)

Blackberry webbläsare 10+ stöder den nya syntaxen.

För mer information om hur man blandar syntaxer för att få bästa webbläsarstöd, se den här artikeln (CSS-Tricks) eller den här artikeln (DevOpera).