How to make the logo was in place, and the cap in the right side?

body { margin: 0px; padding: 0px; font-family: 'Questrial', sans-serif; } .flex-container { display: flex; flex-direction: row; align-items: center; margin-left: 10px; margin-right: 10px; } .flex-container ul { display: flex; justify-content: flex-end; list-style-type: none; font-size: 20px; } .list { display: inline-block; padding: 5px 10px; margin: 0 5px 15px 0; } 
 <header> <nav class="flex-container"> <img class="logo" src="android.png"> <ul> <li><a class="list" href="#">Home</a></li> <li><a class="list" href="#">Company</a></li> <li><a class="list" href="#">Services</a></li> <li><a class="list" href="#">Price</a></li> <li><a class="list" href="#">Projects</a></li> <li><a class="list" href="#">Order</a></li> <li><a class="list" href="#">Contacts</a></li> </ul> </nav> </header>

It seems to indicate that flex-container should be row , from left to right is row - row (default value);

Namely, flex-container ul (flex-end) that is, the content should be on the right side, but it still does not work.

Like now: enter image description here

How to: enter image description here

    2 answers 2

    It can be so. Set the container

    justify-content: space-between;

     * { padding: 0; margin: 0; } html, body { width: 100%; height: 100%; font-family: 'Questrial', sans-serif; } .flex-container { display: flex; justify-content: space-between; margin-left: 10px; margin-right: 10px; } .flex-container ul { display: flex; list-style-type: none; font-size: 20px; margin-right: 50px; } .list { display: inline-block; padding: 5px 10px; margin: 0 5px 15px 0; } 
     <header> <nav class="flex-container"> <img class="logo" src="android.png"> <ul> <li><a class="list" href="#">Home</a></li> <li><a class="list" href="#">Company</a></li> <li><a class="list" href="#">Services</a></li> <li><a class="list" href="#">Price</a></li> <li><a class="list" href="#">Projects</a></li> <li><a class="list" href="#">Order</a></li> <li><a class="list" href="#">Contacts</a></li> </ul> </nav> </header>

    • Explain why you wrote: In * {padding: 0, margin: 0}?, And also why did you write in html, body {100% width and 100% height? - Petrovchenko Ivan
    • What to explain??? - Air
    • And what is *? - Petrovchenko Ivan
    • Because, by default, all elements have padding 4px, margin 4px ... I always drop them ... Habit ... And width: 100%; height: 100%; width: 100%; height: 100%; because body has a default height: 0; And html height: 4px; So this is a habit - Air
    • I hope clearly explained - Air

    There is such a property justify-content: space-between;

     .flex-container { display: flex; justify-content: space-between;}

    If you want to make the logo fixed on the left, and for the menu use the remaining space

     .flex-container { display: flex;} .flex-container > ul {display: flex; flex:1; justify-content: flex-end;}
    • And the hell I wrote the answer))))) - Air
    • What is .flex-container> ul {display: flex; flex: 1; justify-content: flex-end;}, why did you put a larger sign here? How it works? - Petrovchenko Ivan
    • @PetrovchenkoIvan Sign ">" - CSS syntax is a child tag ul Since this menu - then I thought that inside it will be more lists - Oleksandr Davidenko