Flexbox-顶部对齐内容

Question

我想产生以下布局：

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

<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

您可以尝试这样：

HTML：

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

Css：  * {
    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;
  }

Flexbox-顶部对齐内容

问题描述投票：0回答：4

4个回答

最新问题

Flexbox-顶部对齐内容

问题描述 投票：0回答：4

4个回答

最新问题

问题描述投票：0回答：4