在微信小程序項目中經常需要將水平或垂直方向分成兩大部分，一部分內容寬度或高度固定，剩余的一部分需填充滿剩余空間。那么，該怎么快速解決這類布局？
效果圖如下：

垂直方向：

水平方向：

我個人比較喜歡使用flex布局，面對此類布局，最先想到的也是flex布局。常見的flex布局中，可設置flex:1,相當于設置父盒子display:flex,即伸縮布局，flex為1，是子盒子占了一份，自動放大填滿剩余的空間。若還有另一個子盒子也設置flex；1，即這個父盒子被兩個子盒子平分，各占一半。若另一個子盒子設置flex:2,也就是父盒子被所有子盒子平分成3份，以此類推。
常見的flex屬性值：
1.flex:1,也就是flex-grow:1,也就是上面說的自動放大填充滿剩余空間，若有其他子盒子設置flex，則平分。
2.flex:0 0 auto,等同于flex:none,子元素的長度決定它的長度，當整體空間不足時，它也不會縮小，有剩余空間也不放大。相當于它是由子元素固定大小，不放大也不縮小。
3.flex:1 1 auto,等同于flex:auto,由子元素的寬（width）高(height)屬性來改變大小。如果和flex:0 0 auto一起使用就是自適應寬度，自動填充剩余空間。

以下為水平和垂直方向例子：
假設頁面高度為100%，第一部分的高度為200rpx,那么剩余的部分填充滿剩余空間。container2為頁面的外層元素，拆分為兩個部分，第一部分為red,另一部分為blue。
要想頁面高度一開始就是100%，可以在wxss中設置page樣式。

page {
  width: 100%;
  height: 100%;
}

1.垂直方向：
wxml完整代碼如下：

<view class="container2">
  <view class="fixedWidth">
    <view class="red">1</view>
  </view>
  <view class="autoFullWidth">
    <view class="blue">2</view>
  </view>
</view>

wxss完整代碼如下：
注意：
container2需要設置display: flex;flex-direction: column;(column為垂直方向）
剩余空間autoFullWidth需要用定位，
要不然剩余空間就不會自動占滿100%，

page {
  width: 100%;
  height: 100%;
}

.container2 {
  width: 100%;
  height: auto;
  min-height: 100%;
  background-color: #fff;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* 固定寬度 */
.fixedWidth {
  flex: 0 0 auto;
}

/* 自適應寬度 */
.autoFullWidth {
  flex: 1 1 auto;
  position: relative;
}

.blue {
  background: blue;
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font-size: 120rpx;
  color: #fff;
}

.red {
  background: red;
  height: 200rpx;
  font-size: 120rpx;
  color: #fff;
}

2.水平方向
wxml完整代碼如下：

<view class="container2">
  <view class="fixedWidth">
    <view class="red">1</view>
  </view>
  <view class="autoFullWidth">
    <view class="blue">2</view>
  </view>
</view>

wxss完整代碼如下：
注意：
container2需要設置display: flex;flex-direction: row;(row為水平方向）
剩余空間autoFullWidth需要用定位，
要不然剩余空間就不會自動占滿100%，文章來源地址http://www.zghlxwxcb.cn/news/detail-487030.html

page {
  width: 100%;
  height: 100%;
}

.container2 {
  width: 100%;
  height: auto;
  min-height: 100%;
  background-color: #fff;
  position: relative;
  display: flex;
  flex-direction: row;
}

/* 固定寬度 */
.fixedWidth {
  flex: 0 0 auto;
}

/* 自適應寬度 */
.autoFullWidth {
  flex: 1 1 auto;
  position: relative;
}

.blue {
  background: blue;
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font-size: 120rpx;
  color: #fff;
}

.red {
  background: red;
  width: 200rpx;
  height: 100%;
  font-size: 120rpx;
  color: #fff;
}

到了這里，關于微信小程序-flex布局：垂直、水平方向-自動填充滿剩余空間的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！