CSS Flex布局堆叠的问题

cqwcns · 发表于 2020-6-2 21:24

最近在玩小程序，使用Flxe布局时，各个view的宽度是一致的，但高度不一致，这样同一行的两个view高度不同时，会留空。
我不希望它留空，而是全部堆叠起来，不留空，要怎么实现，谢谢。
06-02 212337.png

[HTML] 纯文本查看 复制代码

<!--pages/test/test.wxml-->
<view class="viewContent">
<view class="viewA">A</view>
<view class="viewB">B</view>
<view class="viewC">C</view>
<view class="viewD">D</view>
<view class="viewE">E</view>
</view>

[CSS] 纯文本查看 复制代码

/* pages/test/test.wxss */
.viewContent{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.viewA{
  background-color: aqua;
  width: 50%;
  height: 100px;
}

.viewB{
  background-color: blue;
  width: 50%;
  height: 80px;
}

.viewC{
  background-color: coral;
  width: 50%;
  height:90px;
}

.viewD{
  background-color: darkorange;
  width: 50%;
  height: 120px;
}

.viewE{
  background-color: gray;
  width: 50%;
  height: 100px;
}

cqwcns · 发表于 2020-6-2 22:38

查了一下资料，Grid 网格布局（http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html）应该是可以解决这个问题，但研究了一番，还是没有搞掂，还请各位大哥指教一下。

LXS · 发表于 2020-6-2 22:51

实现瀑布流？？

pengxl1017 · 发表于 2020-6-2 23:13

参考css3 columns属性，实现瀑布流
你对块元素的理解不到位

notproblem · 发表于 2020-6-3 08:53

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style type="text/css">
        * {margin: 0;padding: 0;}
        .pool {column-count: 2;width: 100%;column-width: auto;font-size: 0;column-gap: 6px;}
        .pool > div {background-color: pink;width: 100%;border: 1px solid red;box-sizing: border-box;
            display: inline-block;margin-bottom: 6px;}
        .h1 {height: 100px;}
        .h2 {height: 80px;}
        .h3 {height: 50px;}
    </style>
</head>
<body>
    <div id="app">
        <div class="pool">
            <div class="h1"></div>
            <div class="h2"></div>
            <div class="h3"></div>
            <div class="h2"></div>
            <div class="h1"></div>
        </div>
    </div>
</body>
</html>

cqwcns · 发表于 2020-6-13 22:08

notproblem 发表于 2020-6-3 08:53
[mw_shl_code=html,true]

谢谢，评分送大哥

帐号		自动登录	找回密码
密码			注册[Register]

[求助] CSS Flex布局堆叠的问题

免费评分

个人中心