先做乙個簡單的 demo12
3加上背景色能看的更清楚些
複製**
.main
.item
.item1
.item2
.item3
複製**
然後大概是這個樣子的：
snip_20170213230726
然後我們先都加上 display: flex
好使用 flex 布局，主意，貌似 view 不會自動繼承，需要在每個想使用的 view 裡都加上。
首先是橫向布局和豎向布局，要設定屬性 flex-direction ,它有4個可選值：
row:從左到右的水平方向為主軸
row-reverse:從右到左的水平方向為主軸
column:從上到下的垂直方向為主軸
column-reverse:從下到上的垂直方向為主軸。
小程式 wxss flex布局
一 概念 如果把某乙個元素新增 display flex 的屬性，那麼這個元素當前已經成為了乙個flex container伸縮容器,裡面的元素都是當前元素的子元素，成為flex item 伸縮專案 這裡面的子元素都使用flex布局。一 定義容器 父元素 display flex reverse 1...
小程式流式布局
這只是乙個取巧的方式來實現流式布局，有潛在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...