html - 在不影响其他 flex 元素的情况下对齐 flex 元素

Question

如你所见in my demo here ，我正在尝试制作全高/全宽布局，但我在某些方面遇到了困难:

@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 来尝试垂直和水平对齐元素(并从中学到一点东西)。我想“移除”flex 对 .menu-logo div 的影响，这样它的元素就可以延伸到页面的两侧，标志在左边，其他(菜单)在右边.

有办法吗？

Answer 1

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

换句话说，将display: flex添加到.menu-logo，它会转换它的子元素– .logo 和 .menu – 放入 flex 元素。

然后在.menu-logo中加入justify-content: space-between，使两个flex对齐容器相对边缘的元素。

Revised Codepen

(请注意，必须禁用 clearfix 伪元素才能使 flex 属性正常工作。)

---

或者，您可以使用 justify-content: space-around，它会在 flex 元素和边缘之间添加一些空间。

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

有关完整的解释和插图，请参阅此帖子:Methods for Aligning Flex Items