display布局等分空间、瀑布流布局

想不到耶

已于 2023-06-12 13:46:55 修改

阅读量481

点赞数 2

分类专栏： css 文章标签： css html 前端

于 2023-04-20 10:46:24 首次发布

本文链接：https://blog.youkuaiyun.com/m0_59962820/article/details/130260962

版权

css 专栏收录该内容

11 篇文章

订阅专栏

文章介绍了如何使用CSS的flex布局实现盒子宽度随行宽变化的等分空间效果。通过设置`display:flex`，`flex-wrap:wrap`以及`calc()`函数计算宽度，确保元素在行内三等分，并处理不同情况下的外边距。同时，使用`box-sizing:border-box`确保边框不会影响元素总宽度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、 display布局等分空间

重点：盒子宽度不是固定的，是跟着行宽变化

HTML：

<view class="outter">
	<view class="inner">111</view>
	<view class="inner">222</view>
	<view class="inner">333</view>
	<view class="inner">444</view>
	<view class="inner">555</view>
</view>

CSS：

.outter {
	display: flex;
	flex-wrap: wrap; // 允许元素换行
	background: #838383;
}
.inner {
	margin-right: 30rpx;
	margin-bottom: 32rpx;
	width: calc((100% - 60rpx) / 3); // 60为前两个元素右外边距之和，三等分
	height: 143rpx;
	line-height: 143rpx;
	background: red;
	text-align: center;
    box-sizing: border-box; // 以防有边框时多了宽度
}
.inner:nth-child(3n) { // 每一行最后一个元素的右外边距设为0
	margin-right: 0; 
}