微信小程序布局内容对其方式

最新推荐文章于 2024-04-16 03:41:57 发布

沈阳-施立

最新推荐文章于 2024-04-16 03:41:57 发布

阅读量509

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/winnershili/article/details/89430192

版权

微信小程序专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这里的例子采用的Flex布局

方向为column

关键属性

display: flex;

flex-direction

justify-content

align-items

<view class="item">H</view>

page{
  height: 100%;
  background-color: forestgreen;

  display: flex;
  flex-direction: column; 
  justify-content: flex-start;
}
view{
  width: 100rpx;
  height:100rpx;
  background: #436EEE;
}

page{
  height: 100%;
  background-color: forestgreen;

  display: flex;
  flex-direction: column; 
  justify-content: center;
}
view{
  width: 100rpx;
  height:100rpx;
  background: #436EEE;
}

page{
  height: 100%;
  background-color: forestgreen;

  display: flex;
  flex-direction: column; 
  justify-content: flex-end;
}
view{
  width: 100rpx;
  height:100rpx;
  background: #436EEE;
}

page{
  height: 100%;
  background-color: forestgreen;

  display: flex;
  flex-direction: column; 
  justify-content: flex-start;
  align-items: center;
}
view{
  width: 100rpx;
  height:100rpx;
  background: #436EEE;
}

page{
  height: 100%;
  background-color: forestgreen;

  display: flex;
  flex-direction: column; 
  justify-content: center;
  align-items: center;
}
view{
  width: 100rpx;
  height:100rpx;
  background: #436EEE;
}

page{
  height: 100%;
  background-color: forestgreen;

  display: flex;
  flex-direction: column; 
  justify-content: flex-end;
  align-items: center;
}
view{
  width: 100rpx;
  height:100rpx;
  background: #436EEE;
}

page{
  height: 100%;
  background-color: forestgreen;

  display: flex;
  flex-direction: column; 
  justify-content: flex-start;
  align-items: flex-end;
}
view{
  width: 100rpx;
  height:100rpx;
  background: #436EEE;
}

page{
  height: 100%;
  background-color: forestgreen;

  display: flex;
  flex-direction: column; 
  justify-content: center;
  align-items: flex-end;
}
view{
  width: 100rpx;
  height:100rpx;
  background: #436EEE;
}

page{
  height: 100%;
  background-color: forestgreen;

  display: flex;
  flex-direction: column; 
  justify-content: flex-end;
  align-items: flex-end;
}
view{
  width: 100rpx;
  height:100rpx;
  background: #436EEE;
}

如果切换到row方向则属性相反