flex-direction 在 chrome 中没有按预期工作

Question

拜托，伙计们，我需要你的帮助 flex-direction 不适用于 me.i 已经使用 chrome 和 Microsoft edge 来渲染它，它们都显示相同 thing.pls help i已经研究了两个 days.I 我目前正在关注如何在 youtube.had 上开发响应式网页设计的教程，我从教程中复制了原始源代码，它显示得非常 well.but 如果我我在看教程时正在编码，但 flex 方向根本不起作用。 htm 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Blogger</title>
     <!--
         -FontAwesome Icons-->
     <link rel="stylesheet" href="css/all.css">
    <!--Custom Style-->
    <link rel="stylesheet" href="css/Style.css">
</head>
<body>
  <!---------------------Navigation------------------------>
    <nav class="nav">
        <div class="nav-menu flex-row">
            <div class="nav-brand">
                <a href="#" class="text-gray">
                  Blooger
                </a>
                <div>
                    <div class="toggle-collapse">
                        <div class="toggle-icons">
                            <i class="fas-fa-bars"></i>
                        </div>
                    </div>

                    <ul class="nav-items">
                        <li class="nav-link">
                            <a href="#">Home</a>
                        </li>
                        <li class="nav-link">
                            <a href="#">Category</a>
                        </li>
                        <li class="nav-link">
                            <a href="#">Archive</a>
                        </li>
                        <li class="nav-link">
                            <a href="#">Pages</a>
                        </li>
                        <li class="nav-link">
                            <a href="#">Contact-Us</a>
                        </li>
                    </ul>
                </div>
                <div class="social text-gray">
                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-youtube"></i></a>
                </div>
            </div>
    </nav>
  <!-------x--------------Navigation----------x----------->


    <!--Custom javaScript-->
  <script ></script>  
</body>

</html>

css codes



@import url('../css/fonts.css');

html, body{
margin:0%;
box-sizing: border-box;
overflow-x: hidden;
}

/*Theme Colors*/
:root{

    --text-gray:#3f4954;
    --text-light:#686666da;
    --bg-color:#0f0f0f;
    --white:#ffffff;
    --midnight:#104f55;

    /* Linear Gradient Colors*/
    --sky:linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
}
:root{
   /* Theme Font Family */
    --Abel:'Abel', cursive;
    --Anton:'Anton', cursive;
    --Josefin:'Josefin', cursive;
    --Lexend:'Lexend', cursive;
    --Livvic:'Livvic', cursive;
}

/*----------------Global Classes---------------*/
a{
    text-decoration: none;
    color: var(--text-gray);
}

.flex-row{
    display: flex;
    flex-direction: row;    
    flex-wrap: wrap;



}

ul{

    list-style-type: none;

}

/*-------x---------Global Classes--------x-------*/

/*---------------navbar-----------------------------*/

.nav{
    background: white;
    padding: 0.2rem;
     height: 0rem;
     min-height:10vh;
     overflow:hidden;
}
.nav.nav-menu{
    justify-content:space-between;


}
.nav.nav-menu>div:last-child{
    margin:auto;
}

.nav.nav-menu::before,
.nav.nav-menu::after {
  content: '';
}

.nav .nav-items{
    display: flex;
    margin:0;
}
.nav .nav-items .nav-link{

    padding: 1.6rem 1rem ;
    font-size: 1.1rem;
    position: relative;
    font-family: var(--Abel);
    font-size: 1.6rem;
}


.nav .nav-items .nav-link:hover{
background-color: var(--midnight);

    }
    .nav .nav-items .nav-link:hover a{
        color: var(--white);
    }

.nav.nav-brand a{

    font-size: 1.6rem;
    padding: 1rem 0;
    display: block;
    font-family:var(--Lexend);
    font-size: 1.1rem;

}


.nav .social{
    padding: 1.4rem 0;
}
.nav .social i{

    padding: 0.2rem;
}

.nav .social i:hover{
color: #a1c4cf;
}

/*---x------------navbar---------x--------*/


/*----------------view-port less than or equal to 750px------------------*/
@media only screen and(max-width:750px){
    .nav .nav-menu, .nav .nav-items{
        flex-direction:column;
    }
}
/*------x----------view-port less than or equal to 750px------x------------*/

Answer 1

您的内容因此被隐藏了：

.nav{
   background: white;
   padding: 0.2rem;
   height: 0rem;
   min-height:10vh;
   overflow:hidden;
}

您将导航栏的 height 设置为 0rem。它显示至少一半的块只是因为 min-height: 10vh;

并且 flex-direction 不起作用，因为您在这里错过了 space

@media only screen and(max-width:750px){

而且应该是

@media only screen and (max-width:750px){

flex-direction 在 chrome 中没有按预期工作

flex-direction is not working as expected in chrome

html

css

flexbox

responsive-design