Flexbox margin-right: auto not working，如果我在一个元素中使用 display:none
Posted
技术标签:
【中文标题】Flexbox margin-right: auto not working，如果我在一个元素中使用 display:none【英文标题】：Flexbox margin-right: auto not working, if I use display:none in one element 【发布时间】：2019-09-15 12:08:26 【问题描述】：我想用display:none 删除flexbox 中的一项，并且我想从nav 类中将右对齐（用margin-right: auto）设置为logo 类项。但是如果我使用display:none，那么margin-right: auto 就不起作用了。怎么了？也许是另一种解决方案而不是display:none？
*
margin: 0;
padding: 0;
body
background: white;
/*
---------------------------
----------Flexbox----------
---------------------------
*/
.container
border: 1px solid red;
.header
display: flex;
flex-direction: row;
height: 80px;
.menubtn
align-self: center;
margin-left: 20px;
font-size: 20px;
margin-right: auto;
.logo
align-self: center;
margin-right: 40px;
.nav
background: #000;
color: #FFF;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 0%;
opacity: 0;
text-align: center;
overflow-x: hidden;
list-style: none;
transition: .5s;
border: 1px solid blue;
.closebtn
text-align: left;
margin-left: 30px;
margin-top: 30px;
.nav-item
font-size: 1.8em;
.nav-item:nth-child(1n+2)
margin-top: 3em;
/*
---------------------------
--------Responsive---------
---------------------------
*/
@media (min-width: 640px)
.closebtn
display: none;
.menubtn
display: none;
.nav
transition: 0;
background: none;
color: #000;
display: flex;
flex-direction: row;
align-items: center;
position: static;
opacity: 1;
font-size: 0.8em;
width: auto;
margin-right: auto;
.nav-item:nth-child(1n+2)
margin-left: 10px;
.nav-item:nth-child(1n+2)
margin-top: 0;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Mineral Fever</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<header>
<div class="header">
<p class="menubtn" onclick="openNav()">☰</p>
<nav>
<ul id="nav" class="nav">
<li class="nav-item closebtn" onclick="closeNav()">×</li>
<li class="nav-item">Termékek</li>
<li class="nav-item">Kapcsolat</li>
<li class="nav-item">Szállítás</li>
</ul>
</nav>
<h1 class="logo">Mineral Fever</h1>
</div>
</header>
</div>
</body>
<script src="main.js"></script>
</html>【问题讨论】：
【参考方案1】：你似乎把它弄反了。如果你想将一个元素推到右边，给它一个自动左边距（反之亦然）。以这种方式思考它可能会帮助您：边距（不包括负边距）远离某事。在这种情况下，您希望将元素推离其父元素的左边缘。自动边距根据需要增加以占用任何可用空间（只要宽度不计算为“自动”）。
或者按照 kukkuz 的建议，您可以将自动右边距放在 <nav> 元素上。
【讨论】：
谢谢你的帮助，我现在明白了。【参考方案2】：您只需将 margin-right: auto 添加到 nav 元素 - 请参见下面的演示：
*
margin: 0;
padding: 0;
body
background: white;
/*
---------------------------
----------Flexbox----------
---------------------------
*/
.container
border: 1px solid red;
.header
display: flex;
flex-direction: row;
height: 80px;
.menubtn
align-self: center;
margin-left: 20px;
font-size: 20px;
margin-right: auto;
.logo
align-self: center;
margin-right: 40px;
nav
margin-right: auto; /* added */
.nav
background: #000;
color: #FFF;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 0%;
opacity: 0;
text-align: center;
overflow-x: hidden;
list-style: none;
transition: .5s;
border: 1px solid blue;
.closebtn
text-align: left;
margin-left: 30px;
margin-top: 30px;
.nav-item
font-size: 1.8em;
.nav-item:nth-child(1n+2)
margin-top: 3em;
/*
---------------------------
--------Responsive---------
---------------------------
*/
@media (min-width: 640px)
.closebtn
display: none;
.menubtn
display: none;
.nav
transition: 0;
background: none;
color: #000;
display: flex;
flex-direction: row;
align-items: center;
position: static;
opacity: 1;
font-size: 0.8em;
width: auto;
margin-right: auto;
.nav-item:nth-child(1n+2)
margin-left: 10px;
.nav-item:nth-child(1n+2)
margin-top: 0;
<div class="container">
<header>
<div class="header">
<p class="menubtn" onclick="openNav()">☰</p>
<nav>
<ul id="nav" class="nav">
<li class="nav-item closebtn" onclick="closeNav()">×</li>
<li class="nav-item">Termékek</li>
<li class="nav-item">Kapcsolat</li>
<li class="nav-item">Szállítás</li>
</ul>
</nav>
<h1 class="logo">Mineral Fever</h1>
</div>
</header>
</div>【讨论】：
【参考方案3】：既然你已经在.header 上使用了display: flex;，也许它就像在那里使用justify-content 一样简单……
.header
display: flex;
flex-direction: row;
height: 80px;
justify-content: space-between;
*
margin: 0;
padding: 0;
body
background: white;
/*
---------------------------
----------Flexbox----------
---------------------------
*/
.container
border: 1px solid red;
.header
display: flex;
flex-direction: row;
height: 80px;
justify-content: space-between;
.menubtn
align-self: center;
margin-left: 20px;
font-size: 20px;
margin-right: auto;
.logo
align-self: center;
margin-right: 40px;
.nav
background: #000;
color: #FFF;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 0%;
opacity: 0;
text-align: center;
overflow-x: hidden;
list-style: none;
transition: .5s;
border: 1px solid blue;
.closebtn
text-align: left;
margin-left: 30px;
margin-top: 30px;
.nav-item
font-size: 1.8em;
.nav-item:nth-child(1n+2)
margin-top: 3em;
/*
---------------------------
--------Responsive---------
---------------------------
*/
@media (min-width: 640px)
.closebtn
display: none;
.menubtn
display: none;
.nav
transition: 0;
background: none;
color: #000;
display: flex;
flex-direction: row;
align-items: center;
position: static;
opacity: 1;
font-size: 0.8em;
width: auto;
margin-right: auto;
.nav-item:nth-child(1n+2)
margin-left: 10px;
.nav-item:nth-child(1n+2)
margin-top: 0;
<div class="container">
<header>
<div class="header">
<p class="menubtn" onclick="openNav()">☰</p>
<nav>
<ul id="nav" class="nav">
<li class="nav-item closebtn" onclick="closeNav()">×</li>
<li class="nav-item">Termékek</li>
<li class="nav-item">Kapcsolat</li>
<li class="nav-item">Szállítás</li>
</ul>
</nav>
<h1 class="logo">Mineral Fever</h1>
</div>
</header>
</div>【讨论】：
以上是关于Flexbox margin-right: auto not working，如果我在一个元素中使用 display:none的主要内容，如果未能解决你的问题，请参考以下文章