Aligning flex items without affecting other flex items

Question

As you can see in my demo here , I'm trying to make a full height/width layout, but i'm struggling in some points:

 @import url(https://fonts.googleapis.com/css?family=Montserrat:400,700); .clearfix:after, .clearfix:before { content: " "; display: table; } .clearfix:after { clear: both; } .painel { max-width: 100%; /* added */ height: 100vh; width: 100vw; font-family: 'Montserrat', sans-serif; } h1, h2, h3, h4, h5, h6, p, span, a { font-family: 'Montserrat', sans-serif; color: #333333; font-weight: normal; } .top-wrapper { background-color: #ffc55c; display: flex; align-items: center; justify-content: space-between; flex-direction: column; } .top-wrapper .menu-logo { padding-top: 10px; padding-right: 10px; padding-left: 10px; } .top-wrapper .menu-logo a { color: #e95d35; text-decoration: none; } .top-wrapper .menu-logo .logo { float: left; } .top-wrapper .menu-logo .menu { float: right; } .top-wrapper .slogan-content img { max-width: 100%; float: left; margin-right: 100px; } .top-wrapper .slogan-content .slogan { margin-left: 20px; float: left; font-size: 2.5em; } .top-wrapper .top-bottom { font-size: 2em; width: 500px; text-align: center; } .register { background-color: #FFFFFF; } 

 <div class="top-wrapper painel"> <div class="menu-logo clearfix"> <div class="logo"> <a href="#">logo</a> </div> <div class="menu"> <a href="#">teste</a> <a href="#">teste</a> </div> </div> <div class="slogan-content clearfix"> <img src="https://preview.c9users.io/playma256/projetoprivado/aqueleprojetoprivate/dist/imagens/doubt-face-2.png" /> <div class="slogan"> <p>lorem</p> <p>lorem</p> <p>lorem</p> <p>lorem</p> <p>lorem</p> </div> </div> <!-- slogan --> <div class="top-bottom"> <p>Agora tem o LOGOAQUI para você descobrir mais sobre os médicos</p> </div> <!-- slogan-botton --> </div> </div> <div class="register painel"> <h2>TESTE</h2> </div> 

First, I'm using flexbox to try to align the elements vertically and horizontally (and learn a little bit from it). I want to "remove" the flex influence over the .menu-logo div, so it can have its elements stretched over the sides of the page, logo on left, the others (menu) on the right.

Is there a way to do this?

Answer 1

You can achieve the layout by nesting flex containers.

In other words, add display: flex to .menu-logo , which converts its child elements – .logo and .menu – into flex items.

Then add justify-content: space-between to .menu-logo , which aligns both flex items on opposite edges of the container.

Revised Codepen

(Note that your clearfix pseudo-elements had to be disabled for flex properties to work properly.)

---

Alternatively, you could use justify-content: space-around , which adds some space between the flex items and the edges.

Another alternative would be to skip the justify-content property entirely, and use an auto margin on the flex items. For instance: .logo { margin-right: auto; } .logo { margin-right: auto; } . This would also align both flex items on opposite edges.

For a complete explanation and illustrations see this post: Methods for Aligning Flex Items