伙计们，我需要你的帮助 flex-direction 对我不起作用。我已经使用 chrome 和 Microsoft edge 来渲染它，它们都显示相同的东西。请帮助我已经处理了两天了。我我目前正在关注如何在 youtube 上开发响应式网页设计的教程。如果我从教程中复制了原始源代码，它显示得非常好。但是如果我在观看教程时正在编码，则 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------------*/
最佳答案
您的内容因此被隐藏了:
.nav{
background: white;
padding: 0.2rem;
height: 0rem;
min-height:10vh;
overflow:hidden;
}
您将导航栏的 height 设置为 0rem。它显示至少一半的 block 只是因为 min-height: 10vh;
而且 flex-direction 不起作用，因为你在这里错过了一个空格
@media only screen and(max-width:750px){
应该是
@media only screen and (max-width:750px){
关于html - flex-direction 在 chrome 中没有按预期工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59499177/