css - 不要在布局复杂的 CSS Flex 框中拉伸(stretch)一个元素

Question

我正在尝试创建一个嵌套的 flexbox 布局，以正确(垂直)拉伸(stretch)所有列。它似乎工作得很好，除了在嵌套布局中拉伸(stretch)一个元素。

|---------------------------------------------|
|Header                                       |
|---------------------------------------------|
||--------------------------------|----------||
||TITLE IS THE ISSUE!             |Right     ||
||--------------------------------|Aside     ||
||Left    |Content                |          ||
||Aside   |                       |          ||
||        |                       |          ||
||        |                       |          ||
||        |                       |          ||
||--------|-----------------------|----------||
|---------------------------------------------|
|Footer                                       |
|---------------------------------------------|

我遇到的问题是，如果右侧的内容比其他内容长，则页眉会垂直延伸。如果我尝试覆盖 Title align-self 属性以阻止它拉伸(stretch)，则什么也不会发生。

一个能清楚说明问题的 plunker。看灰色区域(标题-一定不能长):http://plnkr.co/edit/9VBSOKi0ipAy1QDpNAKb?p=preview

谢谢...

Answer 1

从头开始——从内到外构建布局

此布局中有 3 个嵌套的 flex 容器。

#1 - 两个内部列

这些列被包装在它们自己的名为 .flex-inner-columns 的 flex 父级中. <main>元素可能是这位家长的不错选择。

HTML

<main class="flex-inner-columns">

  <div class="column-left">
    column-left
  </div>

  <div class="column-right">
    column-right
  </div>

</main>

CSS

.flex-inner-columns {
  display: flex;
}    
.column-left {
  flex: 1;
 }
.column-right {
  flex: 2;
 }

#2 - 添加标题

标题和内层父级列被封装在另一个名为 .flex-inner 的 flex 父级中. <section>元素可能是这位家长的不错选择。

HTML

<section class="flex-inner">

  <header class="inner-title">
    <h1>inner-title</h1>
  </header>

  <main class="flex-inner-columns">

    <!-- columns are here -->

  </main>

</section>

CSS

这个 flex parent 的 flex-direction 设置为 column .题目给出flex: 0 1 150px并且不会增长，但会根据需要从默认高度 150px 缩小。列 flex 容器给出 flex: 1所以它会增长和收缩。

.flex-inner {
  display: flex;
  flex: 2;
  flex-direction: column;
}
.inner-title {
  flex: 0 1 150px;
  width: 100%;
}
.flex-inner-columns {
  display: flex;
  flex: 1; /* the inner columns flex parent is now given flex 1*/
}

#3 - 最终布局——添加外层 flex parent

所有内容都包裹在一个控制右侧列的最终外部容器中。 .flex-inner给出 flex: 2和 .outer-right一边给出flex: 1 .

完整示例

body {
  margin: 0;
}
.top-header,
footer {
  height: 10vh;
  background: #E91E63;
}
.flex-outer {
  display: flex;
  height: 80vh;
}
.outer-right {
  flex: 1;
  background: #F48FB1;
}
.flex-inner {
  display: flex;
  flex: 2;
  background: #333;
  flex-direction: column;
}
.inner-title {
  background: #9C27B0;
  flex: 0 1 150px;
  align-self: center;
  width: 100%;
}
.flex-inner-columns {
  display: flex;
  flex: 1;
}
.column-left {
  flex: 1;
  background: #CE93D8;
}
.column-right {
  flex: 2;
  background: #AB47BC;
}

<header class="top-header">Header</header>
<div class="flex-outer">

  <section class="flex-inner">

    <header class="inner-title">
      <h1>inner-title</h1>
    </header>

    <main class="flex-inner-columns">

      <div class="column-left">
        column-left
      </div>

      <div class="column-right">
        column-right
      </div>

    </main>

  </section>


  <aside class="outer-right">
    right outer
  </aside>

</div>

<footer>Footer</footer>