Начал изучать вёрстку. Не могу понять почему не применяются свойства justify-content и align-items к заголовку и навигации

Question

*{
    padding: 0;
    margin: 0;
    border: 0;
}
*,*:before,*:after{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
:focus,:active{outline: none;}
a:focus,a:active{outline: none;}
nav,footer,header,aside{display: block;}
html,body{
    height: 100%;
    width: 100%;
    font-size: 100%;
    line-height: 1;
    font-size: 14px;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;

}
input,button,textarea{font-family:inherit;}
input::-ms-clear{display: none;}
button{cursor: pointer;}
button::-moz-focus-inner {padding:0;border:0;}
a, a:visited{text-decoration: none;}
a:hover{text-decoration: none;}
ul li{list-style: none;}
img{vertical-align: top;}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight: 400;}

body{
    background-color: #270350;
}

.container {
    display: flex;
    width: 100%;
    max-width: 1300px;
  margin: 0 auto;
    border: 2px solid white;
    
 }

.header {
    display: flex;
  color: #c900ff;
  min-width: 600px;
    width: 100%;
}
.img{
        width: 100%;
        height: 100%
    }
    .title {
        display: flex;
      font-size: 50px;
        text-decoration: underline;
        color: #c900ff;
    position: absolute;
  }
.header__nav {
        display:flex;
        position: absolute;

        align-items:flex-end;
        
    }
.nav__link{
        padding: 0px 5px;
    flex: 0 1 25%;
        justify-content: space-between;
    }

<!DOCTYPE html>
<html lang="ru">
    <head>
        <title>ANIMARS.RU</title>
        <!-- Подключаем CSS -->
        <link rel="stylesheet" href="styles.css" />
        <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
    </head>
    <!-- Отображаемое тело страницы -->
    <body>
    <!-- Верхушка -->
     <header class="header">
        <div class="container">
                <h1 class="title">ANIMARS</h1>
        <!-- навигация -->
             <nav class="header__nav">
                 <a href="#" class="nav__link">Профиль</a>
                 <a href="#" class="nav__link">Мои списки</a>
                 <a href="#" class="nav__link">Сообщество</a>
                 <a href="#" class="nav__link">О нас</a>
            </nav>

         <!-- картинка марса -->
          <div class="img">
             <img class="img" src="pictures/mars.jpg">
         </div>
    </div>
     </header>
    </body>
</html>

Answer 1

Не надо каждому элементу задавать display:flex, а только 1 родительскому контейнеру, изучите как работает display flex, используя position: absolut-элемент удаляется из обычного потока документов; в макете страницы для элемента не создается места. Вместо этого он позиционируется относительно своего ближайшего предка, если таковой имеется; в противном случае он размещается относительно исходного содержащего блока.

Flex

Position

*{
    padding: 0;
    margin: 0;
    border: 0;
}
*,*:before,*:after{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
:focus,:active{outline: none;}
a:focus,a:active{outline: none;}
nav,footer,header,aside{display: block;}
html,body{
    height: 100%;
    width: 100%;
    font-size: 100%;
    line-height: 1;
    font-size: 14px;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;

}
input,button,textarea{font-family:inherit;}
input::-ms-clear{display: none;}
button{cursor: pointer;}
button::-moz-focus-inner {padding:0;border:0;}
a, a:visited{text-decoration: none;}
a:hover{text-decoration: none;}
ul li{list-style: none;}
img{vertical-align: top;}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight: 400;}

body{
    background-color: #270350;
}

.container {
    display: flex;
    width: 100%;
    max-width: 1300px;
  margin: 0 auto;
    border: 2px solid white;
    
 }

.header {
    display: flex;
  color: #c900ff;
  min-width: 600px;
    width: 100%;
}
.img{
        width: 100%;
        height: 100%
    }
    .title {
      font-size: 50px;
        text-decoration: underline;
        color: #c900ff;
  }
.header__nav {
        align-items:flex-end;
        
    }
.nav__link{
        padding: 0px 5px;
    flex: 0 1 25%;
        justify-content: space-between;
    }

<!DOCTYPE html>
<html lang="ru">
    <head>
        <title>ANIMARS.RU</title>
        <!-- Подключаем CSS -->
        <link rel="stylesheet" href="styles.css" />
        <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
    </head>
    <!-- Отображаемое тело страницы -->
    <body>
    <!-- Верхушка -->
     <header class="header">
        <div class="container">
                <div><h1 class="title">ANIMARS</h1></div>
        <!-- навигация -->
             <div>
             <nav class="header__nav">
                 <a href="#" class="nav__link">Профиль</a>
                 <a href="#" class="nav__link">Мои списки</a>
                 <a href="#" class="nav__link">Сообщество</a>
                 <a href="#" class="nav__link">О нас</a>
            </nav>
            </div>

         <!-- картинка марса -->
          <div class="img">
             <img class="img" src="pictures/mars.jpg">
         </div>
    </div>
     </header>
    </body>
</html>

БЛОГ НА HUSL

Начал изучать вёрстку. Не могу понять почему не применяются свойства justify-content и align-items к заголовку и навигации

Ответы (1 шт):