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：換行，第一行在上方。
換行： 有間距

轉載于:https://www.cnblogs.com/guangzhou11/p/11259331.html

總結

以上是生活随笔為你收集整理的学习旧岛小程序 （1） flex 布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。