Tell me why justify-content values ​​do not work for an inline-flex element. When I change to display: flex; it works.

I need the navigation menu to be using flexbox and on the same line with the heading "Interactive Agency".

 html, body, h1, .menu { font-family: 'Gamja Flower', cursive; padding: 0; margin: 0; } header { background: url(Layer1.png) no-repeat center top / cover; height: 1200px; } header h1 { display: inline-block; font-weight: normal; margin-left: 100px; } .menu { display: inline-flex; flex-direction: row; justify-content: center; } .menu li { display: inline-block; font-weight: bold; font-size: 22px; } .menu li a { text-decoration: none; color: #000; } 
 <header> <nav> <h1><b>Interactive</b>Agency</h1> <ul class="menu"> <li><a href="#">Home</a></li> <li><a href="#">About us</a></li> <li><a href="#">Offer</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header>

    1 answer 1

    Because when the display: inline-flex; element is display: inline-flex; its width comes from the content

     html, body, h1, .menu { font-family: 'Gamja Flower', cursive; padding: 0; margin: 0; } header { background: url(Layer1.png) no-repeat center top / cover; height: 1200px; } header h1 { display: inline-block; font-weight: normal; margin-left: 100px; } .menu { display: inline-flex; flex-direction: row; justify-content: center; background: red; padding: 5px; } .menu li { display: inline-block; font-weight: bold; font-size: 22px; } .menu li a { text-decoration: none; color: #000; background: brown; } 
     <header> <nav> <h1><b>Interactive</b>Agency</h1> <ul class="menu"> <li><a href="#">Home</a></li> <li><a href="#">About us</a></li> <li><a href="#">Offer</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header>

    =====================================

    And when the display: flex; element display: flex; its width comes from its parent, or from some other parameters

     html, body, h1, .menu { font-family: 'Gamja Flower', cursive; padding: 0; margin: 0; } header { background: url(Layer1.png) no-repeat center top / cover; height: 1200px; } header h1 { display: inline-block; font-weight: normal; margin-left: 100px; } .menu { display: flex; flex-direction: row; justify-content: center; background: red; padding: 5px; } .menu li { display: inline-block; font-weight: bold; font-size: 22px; } .menu li a { text-decoration: none; color: #000; background: brown; } 
     <header> <nav> <h1><b>Interactive</b>Agency</h1> <ul class="menu"> <li><a href="#">Home</a></li> <li><a href="#">About us</a></li> <li><a href="#">Offer</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header>

    • Those. with inline-flex you can't move elements along the main axis? - Dastan Zhamekeshev
    • Why? You can hold the container width more than the content and will work. - Air
    • Thanks, @Air, your advice helped! - Dastan Zhamekeshev 2:57 pm