css 调整窗口大小时将项目推到新行(显示伸缩列)

nlejzf6q 于 2023-03-14 发布在其他

关注(0)|答案(1)|浏览(114)

我有3个项目列显示：柔性和柔性 Package ：我的想法是使它的React和当我调整窗口项目从列推别人下来与他们（移动下一个项目到新行）。
现在找不到解决办法，可能是很简单的事情。

.parent{
    position: relative;
    width: 100%;
    height: 600px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;

}

.child{
    position: relative;
    width: 333px;
    height: 100%;
    background-color: rgb(60, 114, 96);
    margin-bottom: 50px;
}

.other{
    position: relative;
    width: 100%;
    height: 200px;
    background-color: black;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="demo.css" type="text/css">
</head>
<body>

    <div class="parent">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>

    <div class="other"></div>

</body>
</html>

css

来源：https://stackoverflow.com/questions/75710603/push-item-on-a-new-line-when-resizing-window-display-flex-column

1条答案

按热度按时间

omqzjyyz1#

看看这个：

.parent{
    display: flex;
    flex-wrap: wrap;
}

.child{
    flex: 1 1 200px;
    background-color: red;
    margin: 12px;
    height: 100px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>
</html>

赞(0）回复(0）举报 2023-03-14

我来回答

css 调整窗口大小时将项目推到新行(显示伸缩列)

1条答案

相关问题

热门标签

最新问答