效果如图：
image.png
<div class="list-box">
<div class="list-item">
// 这里放每个item里面的内容
</div>
</div>
.list-box {
padding: 0 14px;
flex-direction: row;
flex-wrap: wrap;
}
.list-item { // 每个item不要加margin-right
align-items: center; // item里面的内容剧中显示
width: 180px; // 具体宽度看设计稿
margin-bottom: 32px;
flex-shrink: 0; // 另外这里防止每个item变形
}
效果如图：
采用flex实现两列，三列等多列的布局 一、两列布局 二、三列布局
横向布局 横向布局 自动换行 Flex 布局教程：语法篇 文本自动换行 文字超出用省略号显示 wx.switchT...
pandas显示完整的行或列，避免省略中间行或列、以及自动换行。
实现分析 1、GridView的显示由列数、数据源和Item布局决定 2、当GridView所有Item布局不足以...
float是css布局中重要的属性可以实现多列布局，定位等，float与绝对定位一样，都可以实现定位布局，但是fl...
第一列第5个布局 inline-block实现flex实现 第2列第1个布局 float实现flex实现 第3列第...
实现 第一列第5个布局，回复预览链接 预览 实现 第2列第1个布局，回复预览链接 预览 实现 第3列第1个布局，回...
两列布局 三列布局 针对两种不同尺寸屏幕的响应式布局 在中、大尺寸下，一行显示； 在小尺寸下，两行显示 列重置 下...
本章主要介绍常见的布局实现，包括： [1] 两列布局 [2] 三列布局 [3] 弹性 (Flex) 布局 [1] ...
本文标题：2019-10-23-flex布局实现等列换行显示
本文链接：https://www.haomeiwen.com/subject/nfflvctx.html
网友评论