ss相信剛開始學(xué)習(xí)開發(fā)小程序的初學(xué)者一定對界面的布局很困擾，不知道怎么布局，怎么擺放位置，其原因是不了解CSS樣式的屬性，所以，今天代碼君打算寫一篇關(guān)于CSS的教程，給大家普及一下。
說起CSS布局，首先要講解的就是FLex布局，這個可以說是一個萬能鑰匙，遇到什么復(fù)雜的布局，都可以通過Flex布局搞定，為了方便大家理解Flex屬性，我將會一步步解析FLex的屬性，并附上效果圖
采用 Flex 布局的元素，稱為 Flex 容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為 Flex 項目（flex item），簡稱"項目"。
Flex總共有6個屬性
flex-direction 設(shè)置排列方向
flex-wrap 內(nèi)容滿一行，是否換行
flex-flow flex-direction屬性和flex-wrap屬性的簡寫形式
justify-content 左右對齊方式
align-items 上下對齊方式
align-content 多行上下對齊方式
1. flex-direction屬性
flex-direction決定了item里面排列的方向，有下面四個屬性值
row（默認(rèn)值）：橫向排序，從左邊起開始排列item。
row-reverse：橫向排序，從右邊起開始排列item。
column：縱向排列，從頂部開始排列item。
column-reverse：縱向排列，從底部開始排列item。
2.
flex-wrap屬性
默認(rèn)情況下，項目都排在一行上不換行，flex-wrap有三個屬性值
nowrap （默認(rèn)）不換行
wrap 如果第一行滿了，換行
wrap-reverse 換行，第一行在下方
3. flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，這里不建議使用，就不介紹了
4.
justify-content屬性
justify-content用來定義item 左右對齊的方式，有以下五種
flex-start（默認(rèn)值）：左對齊
flex-end：右對齊
center： 居中
space-between：等距對齊，兩端對齊，item之間的間隔都相等。
space-around：每個item兩側(cè)的間隔相等。所以，item之間的間隔比item與邊框的間隔大一倍。
5.
align-items屬性
align-items用來定義item上下對齊的方式，也有五種
flex-start：向上對齊
flex-end：向下對齊。
center：居中。
baseline: item的第一行文字的基線對齊。
stretch（默認(rèn)值）：如果item未設(shè)置高度或設(shè)為auto，將占滿整個容器的高度。
6.
align-content屬性
align-content是多行對齊方式，如果只有把一行，此屬性不起作用
flex-start：向上對齊。
flex-end：向下對齊。
center：居中。
space-between：等距對齊，兩端對齊，item之間的間隔都相等。
space-around：每個item兩側(cè)的間隔相等。所以，item之間的間隔比item與邊框的間隔大一倍。
stretch（默認(rèn)值）：所有item占滿整個容器。
7. 擴展：如果想對容器內(nèi)的item按比例劃分的話，可以用flex-grow屬性，賦值就是該item占一行的比例
初始代碼
<!--index.wxml-->
<view class="container">
<view class="item">
v1
</view>
<view class="item">
v2
</view>
<view class="item">
v3
</view>
</view>
/**index.wxss**/
.container {
height: 1000rpx;
width: 100%;
background-color: rgb(13, 134, 78);
display: flex;
}
.item {
height: 100rpx;
width: 100rpx;
border: 5rpx solid #fff;
}
上圖為初始效果圖,因為 flex-direction默認(rèn)為row，所以剛開始會橫向排列，如果要縱向排列加入flex-direction設(shè)置為column即可
/**index.wxss**/
.container {
height: 1000rpx;
width: 100%;
background-color: rgb(13, 134, 78);
display: flex;
/* 改動的代碼 */
flex-direction: column;
}
改過屬性的效果圖如上，剩下的兩個屬性就不演示了，接下來試一下justify-content左右對齊方式，我們就實現(xiàn)一下等距對齊方式吧
/**index.wxss**/
.container {
height: 1000rpx;
width: 100%;
background-color: rgb(13, 134, 78);
display: flex;
/* 改動的代碼 */
flex-direction: row;
justify-content: space-between;
}
ok，接下來是上下對齊，align-items這個里面有一個和左右對齊不一樣的，就是根據(jù)內(nèi)容文字對齊baseline，讓我們看一下效果是什么樣的，為了有對比性，我把文字的高度設(shè)置的不一樣
/**index.wxss**/
.container {
height: 1000rpx;
width: 100%;
background-color: rgb(13, 134, 78);
display: flex;
/* 改動的代碼 */
flex-direction: row;
justify-content: space-between;
align-items: baseline;
}
.item {
height: 100rpx;
width: 100rpx;
border: 5rpx solid #fff;
}
.item2 {
height: 100rpx;
width: 100rpx;
border: 5rpx solid #fff;
padding-top: 20rpx;
}
看到了吧，這個屬性就是根據(jù)第一行文字為基線對齊的，因為第二個view字位置和其他不一樣，所以整體往上移動了,最后一個，實現(xiàn)以下等比劃分item，用到的屬性是flex-grow，這個屬性需要設(shè)置在item里面才可以
/**index.wxss**/
.container {
height: 1000rpx;
width: 100%;
background-color: rgb(13, 134, 78);
display: flex;
/* 改動的代碼 */
flex-direction: row;
justify-content: space-between;
align-items: baseline;
}
.item {
height: 100rpx;
width: 100rpx;
border: 5rpx solid #fff;
/*占比1*/
flex-grow: 1;
}
.item2 {
height: 100rpx;
width: 100rpx;
border: 5rpx solid #fff;
/*占比1*/
flex-grow: 1;
}
好了，這些就是Flex的全部屬性，最后告訴一下讀者，不要只看文章，一定要跟著教程，去實戰(zhàn)一下，只有這樣，才可以對屬性了解透徹，如果你掌握這些，相信市面上的小程序基礎(chǔ)布局，你都可以實現(xiàn)的。