Question

正如你所看到的in my demo here，我试图制作一个完整的高度/宽度布局，但我在某些方面苦苦挣扎：

＆＃13;

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

＆＃13;

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

＆＃13;

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

有办法做到这一点吗？

Answer 1

您可以通过嵌套Flex容器来实现布局。

换句话说，将 display: flex 添加到.menu-logo，后者会转换其子元素 - .logo和{{1} } - 进入弹性项目。

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

Revised Codepen

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

或者，您可以使用 .menu-logo ，这会在弹性项目和边缘之间添加一些空间。

另一种选择是完全跳过justify-content: space-around属性，并在弹性项目上使用justify-content边距。例如：auto。这也会对齐相对边缘的两个弹性项目。

有关完整说明和插图，请参阅此帖：Methods for Aligning Flex Items

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

1 个答案: