Почему CSS flexbox не работает с медиа-запросом? - PullRequest
Новая
       0

Почему CSS flexbox не работает с медиа-запросом?

1 голос
/ 22 января 2020

У меня есть контейнер flexbox, который содержит 3 контейнера с именем класса столбца. Я пытаюсь изменить все элементы, которые имеют столбец с именем класса на 100%. Когда я меняю размер экрана меньше 500 пикселей, медиа-запрос css должен изменить ширину столбца до 100%, но по какой-то причине это не так. Любая помощь будет оценена. 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>

<meta content="width=device-width, initial-scale=1" name="viewport" />  
<style>

.container{
    max-width:1000px;
    margin:0 auto;
    display:flex;
}


@media all and(max-width:500px){

    .column{
        width:100%;
    }
}

</style>
</head>

<body>

<div id="wrapper">

        <div class="container"> 
                <div class="column">
                  <h3>Column 1</h3>

                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
                  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                </div>
                <div class="column">
                  <h3>Column 2</h3>

                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
                  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                </div>
                <div class="column">
                  <h3>Column 3</h3>

                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
                  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                </div>
        </div>

</div>

</body>
</html>

Ответы [ 3 ]

2 голосов
/ 22 января 2020

Изменение отображения или направления изгиба контейнера при небольшом размере должно работать: 

@media all and (max-width:500px) {
    .column{
        width: 100%;
    }
    .container {
        display: block;
    }
}

Или: 

@media all and (max-width:500px) {
    .column{
        width: 100%;
    }
    .container {
        flex-direction: column;
    }
}

, как вы можете видеть в этой демонстрации:

https://codepen.io/jeprubio/pen/yLyGZPY

0 голосов
/ 22 января 2020

Flexbox по умолчанию пытается поместить все в один ряд. Вы можете принудительно изменить это поведение с помощью flex-wrap . 

@media all and(max-width:500px){
  .container {
    flex-wrap: wrap;
  }
  .column{
    width:100%;
  }
}

Демо: https://codepen.io/timohausmann/pen/rNaoPpM

0 голосов
/ 22 января 2020

Контейнер flexbox изначально пытается использовать все пространство, чтобы разделить их со своими дочерними элементами. Однако этого можно избежать, используя flex-wrap: wrap;.

. Имейте в виду, что вам, возможно, придется настроить дочерний контейнер width s, чтобы он работал должным образом.

Working demo .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...