caoprom在线,超碰国产一区二区三区,国产极品久久

ss相信剛開始學習開發小程序的初學者一定對界面的布局很困擾，不知道怎么布局，怎么擺放位置，其原因是不了解CSS樣式的屬性，所以，今天代碼君打算寫一篇關于CSS的教程，給大家普及一下。

說起CSS布局，首先要講解的就是FLex布局，這個可以說是一個萬能鑰匙，遇到什么復雜的布局，都可以通過Flex布局搞定，為了方便大家理解Flex屬性，我將會一步步解析FLex的屬性，并附上效果圖

基本概念

采用 Flex 布局的元素，稱為 Flex 容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為 Flex 項目（flex item），簡稱"項目"。

Flex容器屬性

Flex總共有6個屬性

flex-direction 設置排列方向
flex-wrap 內容滿一行，是否換行
flex-flow flex-direction屬性和flex-wrap屬性的簡寫形式
justify-content 左右對齊方式
align-items 上下對齊方式
align-content 多行上下對齊方式

1. flex-direction屬性

flex-direction決定了item里面排列的方向，有下面四個屬性值

row（默認值）：橫向排序，從左邊起開始排列item。
row-reverse：橫向排序，從右邊起開始排列item。
column：縱向排列，從頂部開始排列item。
column-reverse：縱向排列，從底部開始排列item。

2. flex-wrap屬性
默認情況下，項目都排在一行上不換行，flex-wrap有三個屬性值

nowrap （默認）不換行
wrap 如果第一行滿了，換行
wrap-reverse 換行，第一行在下方

3. flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，這里不建議使用，就不介紹了

4. justify-content屬性
justify-content用來定義item 左右對齊的方式，有以下五種

flex-start（默認值）：左對齊
flex-end：右對齊
center：居中
space-between：等距對齊，兩端對齊，item之間的間隔都相等。
space-around：每個item兩側的間隔相等。所以，item之間的間隔比item與邊框的間隔大一倍。

5. align-items屬性
align-items用來定義item上下對齊的方式，也有五種

flex-start：向上對齊
flex-end：向下對齊。
center：居中。
baseline: item的第一行文字的基線對齊。
stretch（默認值）：如果item未設置高度或設為auto，將占滿整個容器的高度。

6. align-content屬性
align-content是多行對齊方式，如果只有把一行，此屬性不起作用

flex-start：向上對齊。
flex-end：向下對齊。
center：居中。
space-between：等距對齊，兩端對齊，item之間的間隔都相等。
space-around：每個item兩側的間隔相等。所以，item之間的間隔比item與邊框的間隔大一倍。
stretch（默認值）：所有item占滿整個容器。

7. 擴展：如果想對容器內的item按比例劃分的話，可以用flex-grow屬性，賦值就是該item占一行的比例

Flex屬性實戰

初始代碼

<!--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默認為row，所以剛開始會橫向排列，如果要縱向排列加入flex-direction設置為column即可

/**index.wxss**/
.container {
  height: 1000rpx;
  width: 100%;
  background-color: rgb(13, 134, 78);
  display: flex;

  /* 改動的代碼 */
  flex-direction: column;
}

改過屬性的效果圖如上，剩下的兩個屬性就不演示了，接下來試一下justify-content左右對齊方式，我們就實現一下等距對齊方式吧

/**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這個里面有一個和左右對齊不一樣的，就是根據內容文字對齊baseline，讓我們看一下效果是什么樣的，為了有對比性，我把文字的高度設置的不一樣

/**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;
}

看到了吧，這個屬性就是根據第一行文字為基線對齊的，因為第二個view字位置和其他不一樣，所以整體往上移動了,最后一個，實現以下等比劃分item，用到的屬性是flex-grow，這個屬性需要設置在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的全部屬性，最后告訴一下讀者，不要只看文章，一定要跟著教程，去實戰一下，只有這樣，才可以對屬性了解透徹，如果你掌握這些，相信市面上的小程序基礎布局，你都可以實現的。

新聞中心

微信小程序布局教程