Please enable JavaScript.

Coggle requires JavaScript to display documents.

CSS (display (CSS3 (flex (align-content 交叉方向的布局 (flex-start, flex-end,…

- - - - flex-direction
        
        column
        
        row
        
        column-reverse
        
        row-reverse
      - justify-content
        
        center
        
        flex-end
        
        start
        
        http://css88.b0.upaiyun.com/css88/2017/08/justify-content.png
      - align-items
        
        center
      - align-self
        (item)
        
        flex-end
      - flex-wrap
        
        warp
        溢出部分多行显示
        
        wrap-reverse
      - align-content
        交叉方向的布局
        
        flex-start
        
        flex-end
        
        center
        
        space-between
        
        space-around
        
        space-evenly
        
        stretch
      - flex-grow
        (item) 空间足够时才生效
        控制的是 flex 项的拉伸比例，而不是占据 flex 容器的空间比例。
        
        width/height 占所有兄弟元素的比例
      - flex-shrink
        (item) 空间不足时才生效
      - flex-basis
        (item) 可用于初始大小
        
        flex-basis: 10px;
      - flex
        flex-grow，flex-shrink 和 flex-based 的缩写
        
        .item {flex: 2 0 10%;}
        .item { flex-grow: 2; flex-shrink: 0; flex-basis: 10%; }