.box
display的含義便是指定容器為flex布局，如：display：flex。
當然還可以對行內元素使用flex布局，如：display:inline-flex。
如果不是很理解的話可以只使用display:flex，因為這個就能解決絕大部分實際問題了。
flex屬性分為4個：
row:定義主軸為從左到右。
row-reverse:定義主軸為從右到左。
column:定義主軸為從上到下。
column-reverse:定義主軸從下到上。
見下圖：
注意:在定義主軸的方向時，最好先觀察怎樣定義主軸才能更加簡單的排列元素。
justify-content屬性有5個值:
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
flex-start:主軸起點對齊。 |1 2 3 |
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
flex-end:主軸結束點對齊。 ｜ 1 2 3 ｜
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
center:主軸居中對齊。 ｜ １２３ ｜
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
space-between:主軸兩端無間隔對齊，間隔相同。｜１ ２ ３｜
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
space-around:兩端間隔對齊，間隔相同。｜ １ ２ ３ ｜
與上面的justify-content屬性值一致，相信讀者能通過自己的思考得到側軸賦予上述值得到得作用。
flex-wrap屬性有三個值:
nowrap:（系統預設值）不換行；
wrap：換行；
wrap-reverse：換行，第一行在下方。（從下方開始排列）
至此，flex得基礎用法用上述屬性即可實現。但flex還有更加高階的用法，希望讀者在閱讀完此篇後繼續學習flex得高階用法！
微信小程式 flex布局
flex布局的特點 伸縮容器 使用display block 預設值 的 flex row style display block flex view item 1 view flex view item 2 view flex view item 3 view view 可以從效果圖看到block...
微信小程式之flex布局
flex布局 flex布局的特點 設有display flex或者display block的元素就是乙個flex container 伸縮容器 裡面的子元素稱為flex item 伸縮專案 flex container中子元素都是使用flex布局排版。display flex 指定為行內容器模式，...
微信小程式開發 Flex布局
flex布局的特點 設有display flex或者display block的元素就是乙個flex container 伸縮容器 裡面的子元素稱為flex item 伸縮專案 flex container中子元素都是使用flex布局排版。display flex 指定為行內容器模式，在一行內顯示子...