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