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

Я хотел бы удалить один элемент в 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>

html css flexbox alignment

26.04.2019 03:52

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

2 236

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Поскольку вы уже используете 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>

26.04.2019 04:03

Вы можете просто добавить 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>

26.04.2019 04:08

Ответ принят как подходящий

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

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

Спасибо за помощь, теперь понял.

— 26.04.2019 13:30

26.04.2019 05:17