CODEWITHSUNDEEP
htmlcssflexbox
PlayMa256
PlayMa256

Reputation: 6831

Aligning flex items without affecting other flex items

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?

Upvotes: 1

Views: 2264

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 370993

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; }. This would also align both flex items on opposite edges.

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

Upvotes: 1

Related Questions