微信小程序的頁面開發和WEB一樣，通過css對內容進行渲染布局（在微信小程序里面css的內容是寫在.wxss文件中，如圖）。與傳統WEB不同的是，微信小程序的CSS不建議使用float模擬柵格布局和grid柵格布局。而是使用flex布局，為何呢？
很簡單，小程序完美地支持了Flex布局，這為開發者快速敏捷地進行頁面開發創造了便利條件。
微信小程序所用到的flex布局只是當今CSS3的三大主流布局之一，而這三大主流布局就是：【柵格布局、flex彈性布局、float布局】。下面，我們來PK總結下：
1、CSS3之新特性grid柵格布局：【行row和列column】都自己控制,完全基于CSS控制（未來的主流趨勢，最新的瀏覽器才兼容）
2、float模擬柵格布局：核心控制【列】的一維布局【使用整體：目前市面上最流行的模擬柵格布局,大部分框架都是基于此】
3、flex布局：核心是控制【行的內部布局】形成的一維布局【適合局部：目前市面上最流行的局部布局，大部分框架都開始支持】
其它2種布局在這里我們就不多說了。我們來重點理解感受一下什么是flex布局。看重點：flex布局的核心是控制【行的內部布局】形成的一維布局。一維布局模型，一次只能處理一個維度（一行或者一列）上的元素布局，作為對比的是二維布局CSS Grid Layout，可以同時處理行和列上的布局。也就是說，flex布局大部分的屬性都是作用于主軸的，在交叉軸上很多時候只能被動地變化。
注意的是flex布局大部分的屬性都是作用于主軸的，所以一切都先從主軸看齊，交叉軸的元素只能被動適應，這就是flex的布局了。至于，更深入的理解flex布局，從下節開始可以通過12個flex布局屬性感受下。
