一：概念
如果把某乙個元素新增 display：flex 的屬性，那麼這個元素當前已經成為了乙個flex container伸縮容器,裡面的元素都是當前元素的子元素，成為flex item（伸縮專案）。這裡面的子元素都使用flex布局。
一：定義容器(父元素)；
display:flex;-reverse
（1）：定義主軸 flex-direction
有四個屬性值；
（2）：flex-wrap
有一點需要注意，wxml中總共4個view，它們的寬的和為1000rpx，而螢幕寬度最大為750rpx，而view沒有自動換行，說明一定是壓縮了，這正是flex屬性值的好處，自動調整各個子元件的寬度，與手機開發中的weight有異曲同工之處。
如果不想被壓縮，怎麼辦？也簡單，我們來插個隊，說一下另乙個屬性flex-wrap，它有3個屬性值：
二：對齊方式(子元素)；
（1）justify-conent 根據主軸對齊
（2） align-items 根據豎軸對齊
小程式 View flex 布局
先做乙個簡單的 demo12 3加上背景色能看的更清楚些 複製 main item item1 item2 item3 複製 然後大概是這個樣子的 snip 20170213230726 然後我們先都加上 display flex 好使用 flex 布局，主意，貌似 view 不會自動繼承，需要在每...
小程式流式布局
這只是乙個取巧的方式來實現流式布局，有潛在bug，原理是布局分成兩列，將要顯示的資料也分成奇數列和偶數列，左側展示偶數列資料，右側展示奇數列資料。潛在的bug是如果偶數列裡的高度一直比奇數列的高，就會兩列一列特別長的情況。修復此潛在bug的部落格鏈結 效果圖 html部分 css部分 leftels...
小程式 ui布局
flex布局 相對定位和絕對定位 彈性盒模型 display flex direction flex wrap nowrap 不換行 wrap 換行，第一行在上方 wrap reverse 換行，第一行在下方 justify content align items flex flow flex di...