Flexbox margin-right: авто не работает, если я использую display: none в одном элементе - PullRequest
Новая
       20

Flexbox margin-right: авто не работает, если я использую display: none в одном элементе

1 голос
/ 26 апреля 2019

Я хотел бы удалить один элемент во flexbox с display:none, и я хотел бы установить выравнивание вправо (с margin-right: auto) в logo элемент класса, из класса nav.Но если я использую 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()">&#9776;</p>
                <nav>
                    <ul id="nav" class="nav">
                        <li class="nav-item closebtn" onclick="closeNav()">&times;</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>

Ответы [ 3 ]

1 голос
/ 26 апреля 2019

Вы можете просто добавить 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()">&#9776;</p>
      <nav>
        <ul id="nav" class="nav">
          <li class="nav-item closebtn" onclick="closeNav()">&times;</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>
1 голос
/ 26 апреля 2019

Кажется, у тебя это задом наперед. Если вы хотите сдвинуть элемент вправо, присвойте ему автоматическое левое поле (и наоборот). Это может помочь вам думать об этом так: поля (исключая отрицательные) отталкивают от чего-либо. В этом случае вы хотите отодвинуть элемент от левого края его родителя. Поля авто увеличиваются по мере необходимости, чтобы занять любое доступное пространство (если ширина не вычисляется как «авто»).

Или, как подсказывает kukkuz, вместо этого можно поставить автоматическое правое поле для элемента <nav>.

1 голос
/ 26 апреля 2019

Поскольку вы уже используете display: flex; на .header, возможно, это так же просто, как использовать 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()">&#9776;</p>
                <nav>
                    <ul id="nav" class="nav">
                        <li class="nav-item closebtn" onclick="closeNav()">&times;</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>
...