css ：
view 相當於 div 塊級元素
display 預設設定 block
display:inline 設定後 設定寬度高度是無效的
要設定寬度高度 又要設定為行內元素 我們設定：
(1)display:inline-block;
width:100px;
height:100px;
(2) flex 布局
display:flex
flex-direction:row;
flex-direction 設定布局方向 預設設定 row
row-reverse ： 主軸為 水平方向 起點在右邊
column-reverse：主軸為垂直方向， 起點在下邊
row（預設值）： 主軸為水平方向，起點在左端。
column： 主軸為垂直方向，起點在上沿。
reverse 意思是 倒序
（3） 為什麼行倒序 於 列倒序有點不同
因為他們的高度是他們的本身的高度加起來的 寬度撐滿螢幕
所以在列倒序上只是調整了下位置 行倒序就會向右倒序
原來排序是 1 2 3 反過來就是 3 2 1
（4）justify-content屬性
justify-content屬性定義了專案在主軸上的對齊方式。
flex-start 左邊對齊
flex-end 右邊對齊
center 中心
space-between 兩端對齊，專案之間的間隔都相等
space-around 每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。
start 與 end 的方向 取決於主軸上的對齊方法 是哪個
space-between 讓靠左邊的元素靠左對齊 讓右邊的元素靠右對齊 其他的保持等距
space-between 也就是平均分布
space-around 等距分布 每個元素的左右距離都相等
（5） align-items屬性
align-items屬性定義專案在交叉軸上如何對齊。
flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline: 專案的第一行文字的基線對齊。
stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。
交叉軸的方向取決於主軸的方向
比如： 主軸 row 交叉軸 column 就比如乙個十字路口
stretch 沒有設定高度的情況下
（6） flex-wrap屬性 換行
nowrap（預設）：不換行。
wrap：換行，第一行在上方
wrap：換行，第一行在上方。
換行： 有間距
小程式學習之小程式框架 flex布局
1.基本概念 1 flex模型 當頁面需要適應不同螢幕尺寸以及裝置型別時該模型可以確保元素在恰當的位置 2 容器和專案 用於包含內容的元件是容器，容器內部元件是專案。容器允許包含巢狀。3 座標軸 預設水平布局，水平從左向右是主軸，垂直從上到下是交叉軸。可用flex direction column互...
在小程式中學習flex布局
網頁布局 layout 是css的乙個重點應用。布局的傳統解決方案，基於 盒狀模型 依賴 display 屬性 position 屬性 float 屬性。它對於那些特殊布局非常不方便，比如，垂直居中 就不容易實現。2009年，w3c提出了一種新的方案 flex布局，可以簡便 完整 響應式地實現各種頁...
flex布局學習1
flex的item之間預設沒有間隔 flex grow屬性 2.1 flex布局預設不修改元素的寬度 2.2 彈性布局預設左對齊 當有兩個元素進行彈性布局時，如果我們希望另乙個佔據剩餘父元素的所有寬度時，可以設定這個元素的flex grow屬性為1 flex grow屬性預設為0，即保持預設寬度，當...