css佈局方式

傳統盒模型（display+position+float)

flexbox(flex佈局）彈性佈局

阮一峯 flex佈局教程

• 元素設置爲 display: flex以後，子元素的float, clear, vertical-align屬性將失效

• flex佈局 = 容器( container ) + 容器內各類子元素（ items )
  
  容器默認存在兩根軸：水平的主軸（main axis) 和 垂直的交叉軸（ cross axis)
  主軸 開始位置main start， 結束位置 main end
  交叉軸 開始位置 cross start ， 結束位置 cross end
  items默認沿主軸排列

• 容器 container 的屬性
  flex-direction: row（默認，從左到右） | row-reverse（從右到左） | column（從上到下） | column-reverse（從下到上）; //決定主軸的方向，即items得排列方向
  flex-wrap：nowrap（默認，不換行）| wrap（換行，第一行在上） | wrap-reverse; // 若是一條軸線排不下，如何換行
  flex-flow：flex-direction || flex-wrap;
  justify-content: flex-start（默認，左對齊） | flex-end（右對齊） | center（居中) | space-between(兩端對齊，items間間隔相等） | space-around（items兩側的間隔相等，items間的間隔比item與邊框的距離大）; //定義items在主軸上的對齊方式
  align-items：flex-start(默認，交叉軸起點對齊） | flex-end(終點對齊) | center (交叉軸居中) | baseline(items第一行文字的基線對齊) | stretch(若items未設置高度或爲auto,將佔滿整個容器的高度); //定義items在交叉軸上如何對齊
  align-content：flex-start(交叉軸的起點對齊）| flex-end | center | space-between | space-around（默認,軸線佔滿整個交叉軸); //定義多根軸線的對齊方式

• 項目items的屬性
  order: integer; //定義items的排列順序。數值越小，排列越靠前。默認爲0
  flex-grow: number; //定義項目的放大比例。默認爲0
  flex-shrink:number; //定義項目的縮小比例。默認爲1；
  flex-basis:length | auto; //主軸空間，默認爲auto
  flex:[flex-grow flex-shrink flex-basis]; 默認0 1 auto
  align-self: auto(默認) | flex-start | flex-end | center | baseline | stretch; //容許單個項目item與其餘項目不同對的對齊方式。

grid

掘金css grid佈局