Прижать текст слева при использовании justify-content: center

Question

столкнулся с такой проблемой на которую я решил не закрывать глаза. Используя навигацию и делая ее по цертру, если указать flex-wrpa: wrap. Будет перенос блока.

Но так как я использую justify-content: center; Сталкиваюсь с тем, что блоки, которые переносятся, тоже идут в центор. Как прижать к левому краю, как в случае justify-content: flex-start;

Накидал по быстренькому верстку.

* { 
 box-sizing: border-box;
}  

body { 
 background-color: #212121; 
 margin: 0; 
 padding: 0; 
}

.wrapper { 
 width: 100%; 
 margin: 0 auto;
}   

.header .wrapper { 
  padding: 0 70px;
}

.center-items { 
  display: flex; 
  align-items: center; 
  justify-content: center;
}   
 

.logo {  
 margin: 0 20px 0 0;
 align-self: flex-start;
}

.menu {  
  color: #fff;
  justify-content: space-between;
}

.navigation-menu {  
  background-color: #282626; 
  flex-wrap: wrap;
}
 
.link { 
  text-decoration: none;
  color: #fff; 
}

.menu-link {  
  padding: 40px 20px;    
  text-align: left; 
  transition: 0.2s;
} 

.menu-link:hover {  
  background-color: #e44a37; 
} 

.bar {  
  margin: 0 0 0 20px;
  align-self: flex-start; 
}

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>TRC</title>
</head>
<body>
  <div class="header">   
   <div class="wrapper"> 
      
    <div class="menu center-items">
      <div class="logo"> 
        <h1 class="logo-title">TRC</h1> 
        <!--       типа  svg -->
      </div> 
    
      <nav class="navigation-menu center-items "> 
        <a class="menu-link link" href="#">TRC1231124</a> 
        <a class="menu-link link" href="#">TRC124235235235235</a> 
        <a class="menu-link link" href="#">TRC1213123</a> 
        <a class="menu-link link" href="#">TRC121311</a> 
        <a class="menu-link link" href="#">TRC1213123</a> 
        <a class="menu-link link" href="#">TRC1213414</a> 
        <a class="menu-link link" href="#">TRC1213123</a> 
        <a class="menu-link link" href="#">TRC121311</a> 
        <a class="menu-link link" href="#">TRC1213114</a> 
        <a class="menu-link link" href="#">TRC121357578</a>
      </nav> 
    
      <div class="bar"> 
          <h2 class="bar__title">hard</h2> 
          <!--       типа  svg -->
      </div>   
    </div>
     
   </div>   
  </div>  
</body>
</html>

Хочу получить примерно такой effect.

БЛОГ НА HUSL

Прижать текст слева при использовании justify-content: center

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