在不影响其他弹性项目的情况下对齐弹性项目

Question

如您所见in my demo here，我正在尝试制作完整的 height/width 布局，但我在某些方面遇到困难：

@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>

首先，我正在使用 flexbox 尝试垂直和水平对齐元素（并从中学习一点）。我想 "remove" 对 .menu-logo div 的 flex 影响，因此它可以将其元素拉伸到页面的两侧，左侧的徽标，右侧的其他（菜单） .

有办法吗？

Answer 1

可以通过嵌套flex容器实现布局

也就是说，将display: flex添加到.menu-logo中，即转换其子元素-.logo 和 .menu – 进入弹性项目。

然后将 justify-content: space-between 添加到 .menu-logo，这会将两个弹性项目对齐到容器的相对边缘.

Revised Codepen

（请注意，必须禁用您的 clearfix pseudo-elements 才能使 flex 属性正常工作。）

或者，您可以使用 justify-content: space-around，这会在 flex 项目和边缘。

另一种选择是完全跳过 justify-content 属性，并在弹性项目上使用 auto 边距。例如：.logo { margin-right: auto; }。这也会将两个弹性项目对齐到相对的边缘。

有关完整的解释和插图，请参阅此 post：

在不影响其他弹性项目的情况下对齐弹性项目

Aligning flex items without affecting other flex items

html

css

flexbox