flex容器的align-items设置属性值，交叉轴对齐方式都是居中
发布于 6 年前 作者 shaoyong 19204 次浏览 来自 问答

wxml代码如下：

<view class="container">
 <view class="item">1view>
 <view class="item">2view>
 <view class="item">3view>
 <view class="item">4view>
view>

wxss代码如下：

.container{
 width: 100%;
 height: 100%;
 background-color: #ddd;
 display: flex;
  /* flex-direction: row ; */
 /* flex-wrap: wrap; */
  flex-flow: row wrap;
 /*主轴上的 对齐方式  */
 justify-content: space-between;  
 /*交叉轴上的对齐方式  */
 align-items: flex-end;  
  background: red;
}
.item{
 width: 100rpx;
 height: 100rpx;
 background-color: #00f;
 border: 1rpx solid #fff;
}

效果图如下：（红色背景为flex容器范围）

微信开发工具版本号： v0.20.191900

回到顶部