Flexible Box Layout Module

Flexible Box Layout Module

Method of positioning elements in horizontal or vertical stacks. Support includes the support for the all properties prefixed with flex as well as display: flex, display: inline-flex, align-content, align-items, align-self, justify-content and order.

Spec http://www.w3.org/TR/css3-flexbox/
Status W3C Candidate Recommendation
IE Edge Firefox Chrome Safari Opera
    57 62    
    56 61 TP 48
  16 55 60 11 47
11 (4) 15 54 59 10.1 46
10 (2,4,*) 14 53 58 10 45
9 13 52 57 9.1 44
8 12 51 56 9 43
Show all
7   50 55 8 (*) 42
6   49 54 7.1 (*) 41
5.5   48 53 7 (*) 40
    47 52 6.1 (*) 39
    46 51 6 (1,*) 38
    45 50 5.1 (1,*) 37
    44 49 5 (1,*) 36
    43 48 4 (1,*) 35
    42 47 3.2 (1,*) 34
    41 46 3.1 (1,*) 33
    40 45   32
    39 44   31
    38 43   30
    37 42   29
    36 41   28
    35 40   27
    34 39   26
    33 38   25
    32 37   24
    31 36   23
    30 35   22
    29 34   21
    28 33   20
    27 (3) 32   19
    26 (3) 31   18
    25 (3) 30   17
    24 (3) 29   16 (*)
    23 (3) 28 (*)   15 (*)
    22 (3) 27 (*)   12.1
    21 (1,*) 26 (*)   12
    20 (1,*) 25 (*)   11.6
    19 (1,*) 24 (*)   11.5
    18 (1,*) 23 (*)   11.1
    17 (1,*) 22 (*)   11
    16 (1,*) 21 (*)   10.6
    15 (1,*) 20 (1,*)   10.5
    14 (1,*) 19 (1,*)   10.0-10.1
    13 (1,*) 18 (1,*)   9.5-9.6
    12 (1,*) 17 (1,*)   9
    11 (1,*) 16 (1,*)    
    10 (1,*) 15 (1,*)    
    9 (1,*) 14 (1,*)    
    8 (1,*) 13 (1,*)    
    7 (1,*) 12 (1,*)    
    6 (1,*) 11 (1,*)    
    5 (1,*) 10 (1,*)    
    4 (1,*) 9 (1,*)    
    3.6 (1,*) 8 (1,*)    
    3.5 (1,*) 7 (1,*)    
    3 (1,*) 6 (1,*)    
    2 (1,*) 5 (1,*)    
      4 (1,*)    
iOS Safari Opera Mini Android Browser Blackberry Browser Opera Mobile Android Chrome Android Firefox IE Mobile Android UC Browser Samsung Internet QQ Browser Baidu Browser
11                      
10.3 all 56 10 37 59 54 11 11.4 (1,*) 5 1.2 7.12
10.0-10.2   4.4.3-4.4.4 7 (1,*) 12.1     10 (2,*)   4    
9.3   4.4   12              
9.0-9.2   4.2-4.3 (1,*)   11.5              
Show all
8.1-8.4 (*)   4.1 (1,*)   11.1              
8 (*)   4 (1,*)   11              
7.0-7.1 (*)   3 (1,*)   10              
6.0-6.1 (1,*)   2.3 (1,*)                  
5.0-5.1 (1,*)   2.2 (1,*)                  
4.2-4.3 (1,*)   2.1 (1,*)                  
4.0-4.1 (1,*)                      
3.2 (1,*)                      

Notes

Most partial support refers to supporting an older version of the specification or an older syntax.

  1. Only supports the old flexbox specification and does not support wrapping.

  2. Only supports the 2012 syntax

  3. Does not support flex-wrap, flex-flow or align-content properties

  4. Partial support is due to large amount of bugs present (see known issues)

* Partial support with prefix.

Bugs

  • Flexbugs: community-curated list of flexbox issues and cross-browser workarounds for them

  • In IE10 the default value for flex is 0 0 auto rather than 0 1 auto as defined in the latest spec.

  • In Safari 10.1 and below, the height of (non flex) children are not recognized in percentages. However other browsers recognize and scale the children based on percentage heights. Fixed in all versions > 10.1 (See bug) The bug also appeared in Chrome but was fixed in Chrome 51

  • Firefox 51 and below does not support Flexbox in button elements. Fixed in version 52.

  • IE 11 does not vertically align items correctly when min-height is used see bug

  • In IE10 and IE11, containers with display: flex and flex-direction: column will not properly calculate their flexed childrens' sizes if the container has min-height but no explicit height property. See bug.

  • IE 11 requires a unit to be added to the third argument, the flex-basis property see MSFT documentation

  • Safari 10 and below uses min/max width/height declarations for actually rendering the size of flex items, but it ignores those values when calculating how many items should be on a single line of a multi-line flex container. Instead, it simply uses the item's flex-basis value, or its width if the flex basis is set to auto. see bug. Fixed in all versions > 10.

Resources

Data by caniuse.com
Licensed under the Creative Commons Attribution License v4.0.
http://caniuse.com/#feat=flexbox

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号

意见反馈
返回顶部