Please enable JavaScript.

Coggle requires JavaScript to display documents.

Flex box (組成 (flex container (display:flex), flex items), flex direction…

- - - - 由左至右
    - - 由右到左
  - - - 由上到下
    - - 由下到上
- - - - 預設items會縮小以擠進container
      - 但 item 設 min-width
        
        超出container
- - - - 位置
        
        flex-start
        
        flex-end
        
        flex-center
        
        items的間距以padding ,margin來設定
      - space
        
        space-between
        
        space-around
        
        space-evenly
        
        以間距來設定
  - - - flex-start
      - flex-end
      - center
      - baseline
        
        內容對齊 baseline
        
        item 隨著跑
      - stretch (預設)
        
        延伸填滿容器空間
    - - for 多行
      - flex-end
        
        center
        
        flex-start
        
        stretch
        
        多行
        
        space-around
        
        space-between
- - - - 設定比例
        
        以父元素尺寸為基礎
    - - 分配剩餘空間
        
        預設為 0
        
        沒變化
        
        設定為 1 以上
        
        填滿剩餘空