Justify-content 在我的 flexbox 中停止工作，我不知道为什么

Question

当我的 flexbox 突然停止工作时，我的页面快要完成了。我正在尝试以从上到下的主要方向使用它，我想使用 justify-content: "space-around" 选项。我用验证器检查了我的 HTML 中的错误，然后我尝试将我的代码移植到 w3s 上的示例，以查看我的代码中的某些内容何时会破坏该示例，但那一刻从未到来。

html {
    font-family: "Archivo", "Arial";
    background-color: #223333;
    color: #eeeeee;
}

* {
    font-family: "Archivo", "Arial";
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.paneel {
    /*outline: 2px solid red;*/
    margin: 20px;
    border-radius: 20px;
    border: 2px solid orange;
}

h1 {
    font-family: "Archivo", "Arial";
    font-size: 8vw;
    text-align: center;
}

button {
    padding: 10px;
    border-radius: 10px;
    border: 2px solid orange;
    background-color: #223333;
    color: white;
    font-family: "Archivo", "Arial  ";
    font-size: 2.5vw;
}

input {
    padding: 10px;
    border-radius: 10px;
    border: 2px solid orange;
    background-color: #223333;
    color: white;
    font-family: "Archivo", "Arial  ";
    font-size: 2.5vw;
}

label {
    padding: 10px;
    background-color: #223333;
    color: white;
    font-family: "Archivo", "Arial  ";
    font-size: 2.5vw;
}

.column {
    flex-grow: 1;
}

p {
    font-family: verdana;
    font-size: 20px;
}

#paneelConf {
    height: 300px;
}

#paneelActie {
    height: 200px;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <script defer src="script.js"></script>
        <link rel="stylesheet" type="text/css" href="style.css" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Archivo" />
        <title>BLE for Js</title>
    </head>

    <body>
        <header>
            <h1>BLE for Js</h1>
        </header>
        <div id="paneelConf" class="paneel">
            <div class="container">
                <div>
                    <label id="lblService">Service UUID: </label>
                    <input id="iptService" />
                </div>
                <div>
                    <label id="lblCharacteristic">Characteristic UUID: </label>
                    <input id="iptCharacteristic" />
                </div>
                <div>
                    <button type="button" id="btnBLE">Connect to the BLE pheripheral</button>
                </div>
            </div>
        </div>
        <div id="paneelActie" class="paneel">
            <div class="container">
                <div>
                    <button type="button" id="btnRead">Read delay</button>
                    <label id="lblRes"></label>
                </div>
                <div>
                    <button type="button" id="btnWrite">Write delay</button>
                    <input id="iptWaarde" type="number" value="50" />
                </div>
            </div>
        </div>
    </body>
</html>

Answer 1

从视觉上看，您看不到规则 justify-content: space-around 起作用，因为选择器 .container 的高度不足。为此选择器 .container.

添加高度 height: 100% 或 height: inherit 的规则

html {
    font-family: "Archivo", "Arial";
    background-color: #223333;
    color: #eeeeee;
}

* {
    font-family: "Archivo", "Arial";
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    height: 100%;
}

.paneel {
    /*outline: 2px solid red;*/
    margin: 20px;
    border-radius: 20px;
    border: 2px solid orange;
}

h1 {
    font-family: "Archivo", "Arial";
    font-size: 8vw;
    text-align: center;
}

button {
    padding: 10px;
    border-radius: 10px;
    border: 2px solid orange;
    background-color: #223333;
    color: white;
    font-family: "Archivo", "Arial  ";
    font-size: 2.5vw;
}

input {
    padding: 10px;
    border-radius: 10px;
    border: 2px solid orange;
    background-color: #223333;
    color: white;
    font-family: "Archivo", "Arial  ";
    font-size: 2.5vw;
}

label {
    padding: 10px;
    background-color: #223333;
    color: white;
    font-family: "Archivo", "Arial  ";
    font-size: 2.5vw;
}

.column {
    flex-grow: 1;
}

p {
    font-family: verdana;
    font-size: 20px;
}

#paneelConf {
    height: 300px;
}

#paneelActie {
    height: 200px;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Archivo" />
<body>
    <header>
        <h1>BLE for Js</h1>
    </header>
    <div id="paneelConf" class="paneel">
        <div class="container">
            <div>
                <label id="lblService">Service UUID: </label>
                <input id="iptService" />
            </div>
            <div>
                <label id="lblCharacteristic">Characteristic UUID: </label>
                <input id="iptCharacteristic" />
            </div>
            <div>
                <button type="button" id="btnBLE">Connect to the BLE pheripheral</button>
            </div>
        </div>
    </div>
    <div id="paneelActie" class="paneel">
        <div class="container">
            <div>
                <button type="button" id="btnRead">Read delay</button>
                <label id="lblRes"></label>
            </div>
            <div>
                <button type="button" id="btnWrite">Write delay</button>
                <input id="iptWaarde" type="number" value="50" />
            </div>
        </div>
    </div>
</body>

Justify-content 在我的 flexbox 中停止工作，我不知道为什么

Justify-content stopped working in my flexbox and I don't know why

html

css

google-chrome