Блог

Главная - Вопросы по программированию - Оправдание-контент перестал работать в моем flexbox, и я не знаю, почему

Оправдание-контент перестал работать в моем flexbox, и я не знаю, почему

#html #css #google-chrome

Вопрос:

Я почти закончил со своей страницей, когда мой flexbox внезапно перестал работать. Я пытаюсь использовать его с основным направлением, идущим сверху вниз, и я хотел бы использовать опцию обоснования содержимого: «пространство вокруг». Я проверил наличие ошибок в своем 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>

Ответ №1:

Визуально вы не видите, что правило justify-content: space-around работает из-за отсутствия высоты селектора .container . Добавьте правило высоты height: 100% или height: inherit для этого селектора .container .

 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>

Комментарии:

1. Спасибо, что решили эту проблему. Я все еще немного не уверен, почему это работало раньше или почему так много страниц, подобных этой developer.mozilla.org/en-US/docs/Web/CSS/… не используйте ширину: 100%. Это потому, что они задают высоту/ширину коробки с помощью px или что-то в этом роде?

2. @ZwarteKop, вы изменили структуру html до того, как она заработала?

3. @ZwarteKop, посмотри, пожалуйста — i.ibb.co/dDFtg5c/image.png .

4. Нет, мне нужно было только изменить css. Я просто добавил строку «высота: 100%;» в класс контейнера, как и вы.

Метки: , ,