水平对齐 3 个矩形

Question

我有 3 个矩形，我想从中间水平对齐所有矩形，我尝试使用 position: flex 和 white-space: nowrap 但它们都不起作用，我不知道为什么它不起作用行不通，矩形仅垂直显示。

HTML 代码：

<div class="plots">
<div></div>
<div></div>
<div></div>
</div>

CSS 代码：

.plots {
    white-space: nowrap;
    position: flex;
}

.plots > div{
    background: #ffffff;
    height: 35vh;
    width: 14vw;
    margin-top: 2.1vh;
    border-radius: 10%;
}

我想要什么：https://i.stack.imgur.com/scpPu.png

Answer 1

使用显示：弹性；属性

.plots {
    white-space: nowrap;
    display: flex;
    justify-content:space-around;
}