Question

.content {
  display: flex;
  flex-flow: row wrap;
  height: 800px;
  align-items: flex-start;
}

.header {
  background-color: magenta;
  flex: 1 100%;
}

.body {
  background-color: blue;
  color: white;
  flex: 1 0;
}

.nav {
  background-color: green;
}

<div class="content">
  <div class="header">
    <h1>Header</h1>
  </div>
  <div class="body">
    <h2>Body</h2>
  </div>
  <div class="nav">
    <h2>Navigation</h2>
  </div>
</div>

我想生成以下布局：

我的标记被限制为以下格式：

<div class="content">
  <div class="header"><h1>Header</h1></div>
  <div class="body"><h2>Body</h2></div>
  <div class="nav"><h2>Navigation</h2></div>
</div>

当前，我能够生成所需的布局，但仅在标头和以下div之间留有间隙。到目前为止，我已经用自己的作品创建了codepen。

我知道我缺少明显的东西，但是请有人建议如何“顶部对齐”车身和导航div？我尝试过证明内容和对齐项目选项均无济于事。

非常感谢！

Answer 1

.content {
  flex-flow: row wrap;
  height: 100px;
  display:flex;
}

.header {
  background-color: magenta;
  flex: 1 100%;
}

.body {
  background-color: blue;
  color: white;
  flex: 1 0;
}

.nav {
  background-color: green;
}

Answer 2

只需从弹性盒中移除固定高度即可。目前，您的flexbox项目正在尝试将第二行包装在盒子总高度的中间：

.content {
  display: flex;
  flex-flow: row wrap;
  /*height: 400px;*/
  align-items: flex-start;
}

.header {
  background-color: magenta;
  flex: 1 100%;
}

.body {
  background-color: blue;
  color: white;
  flex: 1 0 0;
}

.nav {
  background-color: green;
}

<div class="content">
  <div class="header"><h1>Header</h1></div>
  <div class="body"><h2>Body</h2></div>
  <div class="nav"><h2>Navigation</h2></div>
</div>

Answer 3

我知道这很明显。我在align-content div上缺少content。

Answer 4

您可以尝试这样：

  * {
    box-sizing: border-box; 
  }
  body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    margin: 0;
  }
  #main {
    display: flex;
    flex: 1;
  }
  #main > article {
    flex: 1;
    order: 1;
  }

  #main > aside {
    flex: 0 0 20vw;
    background: beige;
    order: 2;
  }
  
  header {
    background: yellowgreen;
    height: 20vh;
  }

  <body>
  <header>Header</header>
  <div id="main">
    <article>Article</article>  
    <aside>Aside</aside>
  </div>
</body>

Answer 5

尝试此代码

.content {
	display: flex;
	flex-flow: row wrap;
	height: 400px;
}

.header {
	background-color: magenta;
	flex: 1 100%;
	align-items: center;
	display: flex
}

.body {
	background-color: blue;
	color: white;
	flex: 1 0;
	align-items: center;
	display: flex
}

.nav {
	background-color: green;
	align-items: center;
	display: flex
}

 <div class="content">
  <div class="header"><h1>Header</h1></div>
  <div class="body"><h2>Body</h2></div>
  <div class="nav"><h2>Navigation</h2></div>
</div>

：

Flexbox-顶部对齐内容

5 个答案: