優秀文章，第一時間送達！
css相信剛開始學習開發小程序的初學者一定對界面的布局很困擾，不知道怎么布局，怎么擺放位置，其原因是不了解CSS樣式的屬性，所以，今天代碼君打算寫一篇關于CSS的教程，給大家普及一下。
說起CSS布局，首先要講解的就是FLex布局，這個可以說是一個萬能鑰匙，遇到什么復雜的布局，都可以通過Flex布局搞定，為了方便大家理解Flex屬性，我將會一步步解析FLex的屬性，并附上效果圖
基本概念
采用 Flex 布局的元素，稱為 Flex 容器（flex ），簡稱"容器"。它的所有子元素自動成為容器成員，稱為 Flex 項目（flex item），簡稱"項目"。
Flex容器屬性
Flex總共有6個屬性
flex- 設置排列方向
flex-wrap 內容滿一行，是否換行
flex-flow flex-屬性和flex-wrap屬性的簡寫形式
- 左右對齊方式
align-items 上下對齊方式
align- 多行上下對齊方式
1.flex-屬性
flex-決定了item里面排列的方向，有下面四個屬性值
row（默認值）：橫向排序，從左邊起開始排列item。
row-：橫向排序，從右邊起開始排列item。
：縱向排列，從頂部開始排列item。
-：縱向排列，從底部開始排列item。
2. flex-wrap屬性
默認情況下，項目都排在一行上不換行，flex-wrap有三個屬性值
（默認）不換行
wrap 如果第一行滿了，換行
wrap- 換行，第一行在下方
3. flex-flow屬性是flex-屬性和flex-wrap屬性的簡寫形式，這里不建議使用，就不介紹了
4. -屬性
-用來定義item 左右對齊的方式，有以下五種
flex-start（默認值）：左對齊
flex-end：右對齊
： 居中
space-：等距對齊，兩端對齊，item之間的間隔都相等。
space-：每個item兩側的間隔相等。所以，item之間的間隔比item與邊框的間隔大一倍。
5. align-items屬性
align-items用來定義item上下對齊的方式，也有五種
flex-start：向上對齊
flex-end：向下對齊。
：居中。
: item的第一行文字的基線對齊。
（默認值）：如果item未設置高度或設為auto，將占滿整個容器的高度。
6. align-屬性
align-是多行對齊方式，如果只有把一行，此屬性不起作用
flex-start：向上對齊。
flex-end：向下對齊。
：居中。
space-：等距對齊，兩端對齊，item之間的間隔都相等。
space-：每個item兩側的間隔相等。所以，item之間的間隔比item與邊框的間隔大一倍。
（默認值）：所有item占滿整個容器。
7. 擴展：如果想對容器內的item按比例劃分的話，可以用flex-grow屬性，賦值就是該item占一行的比例
Flex屬性實戰
初始代碼
上圖為初始效果圖,因為 flex-默認為row，所以剛開始會橫向排列，如果要縱向排列加入flex-設置為即可
改過屬性的效果圖如上，剩下的兩個屬性就不演示了，接下來試一下-左右對齊方式微信小程序 橫向排列，我們就實現一下等距對齊方式吧
ok，接下來是上下對齊，align-items這個里面有一個和左右對齊不一樣的，就是根據內容文字對齊，讓我們看一下效果是什么樣的，為了有對比性，我把文字的高度設置的不一樣
看到了吧，這個屬性就是根據第一行文字為基線對齊的，因為第二個view字位置和其他不一樣，所以整體往上移動了,最后一個，實現以下等比劃分item，用到的屬性是flex-grow微信小程序 橫向排列，這個屬性需要設置在item里面才可以
總結
好了，這些就是Flex的全部屬性，最后告訴一下讀者，不要只看文章，一定要跟著教程，去實戰一下，只有這樣，才可以對屬性了解透徹，如果你掌握這些，相信市面上的小程序基礎布局，你都可以實現的。
