微信小程序 flex布局

最新推荐文章于 2024-07-12 09:30:00 发布

你管我管你疯啊

最新推荐文章于 2024-07-12 09:30:00 发布

阅读量109

点赞数

分类专栏：微信小程序-知识总结

本文链接：https://blog.csdn.net/weixin_45527865/article/details/118674345

版权

微信小程序-知识总结专栏收录该内容

47 篇文章 2 订阅

订阅专栏

本文探讨了CSS中.box的样式设置，使用了Flexbox实现灵活的布局，包括元素居中、间距调整和响应式设计。通过示例代码展示了如何创建一个三列布局，并利用伪元素处理对齐。内容涵盖了CSS基础、Flexbox属性和布局策略。

摘要由CSDN通过智能技术生成

在这里插入图片描述

.box {
  padding:20rpx 30rpx;
  box-sizing: border-box;
  height: 240rpx;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}
.item {
  background-color: #ccc;
  width: 200rpx;
  height: 200rpx;
  text-align: center;
  line-height: 200rpx;
  margin-bottom: 20rpx;
}
//关键是这里
.box::after{
  content: '';
  width:200rpx;
}

<view class="box">
  <view class="item">12</view>
  <view class="item">32</view>
  <view class="item">56</view>
  <view class="item">78</view>
  <view class="item">90</view>
</view>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

你管我管你疯啊

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
微信小程序 flex布局

.box { padding:20rpx 30rpx; box-sizing: border-box; height: 240rpx; display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between;}.item { background-color: #ccc; width: 200rpx; height: 200rpx; text-align: cen.
复制链接

扫一扫