常用布局方式也就是float，但flex布局更適合移動端專案開發：
參考flex布局
1，布局方式
display: flex;
display: -webkit-flex; /* safari */
a.橫向縱向布局：
flex-direction: row | column | row-reverse | row-reverse;
b. 比例布局：預設0
flex-grow： 0 | 1 | 2 |
flex-shrink:設定為0，則即便空間不夠，自身也不縮小.
c.允許換行flex-wrap：
flex-wrap：nowrap(預設) | wrap | wrap-reverse
wrap-reverse第一排會緊貼容器底部
justify-content：flex-start(預設) | flex-end | center | space-between | space-around | space-evenly
align-items：flex-start | flex-end | center | baseline | stretch(預設)
多行對齊方式：
align-content：flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(預設);
繼承父容器的align-items屬性:
align-self:auto(預設) | flex-start | flex-end | center | baseline | stretch
space-between：左右兩側專案都緊貼容器
space-around ：專案之間間距為左右兩側專案到容器間距的2倍
專案之間間距與專案與容器間距相等，相當於除去專案寬度，平均分配了剩餘寬度作為專案左右margin
baseline：專案以第一行文字的基線為參照進行排列。
order決定專案排列順序，數值越小，專案排列越靠前
order：0更多布局grid
CSS布局flex布局常用屬性
display flex使用flex布局首先要設定父容器 水平方向 justify content flex start 起始端對齊 justify content flex end 末尾段對齊 justify content center 居中對齊 justify content space ar...
flex布局簡單總結
flex 是 flexible box 的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。注意 屬性名屬性值 備註display flex 定義了乙個flex容器，它的直接子元素會接受這個flex環境 flex direction row,row reverse,column,column r...
Flex布局簡單總結
複習到flex，總結一下方便檢視 以下6個屬性設定在容器上。屬性描述 值flex direction 決定主軸的方向 即專案的排列方向 row 預設值 row reverse column column reverse flex wrap 定義如何換行。nowrap 預設值 wrap wrap re...