不要在具有复杂布局的CSS Flex框中拉伸一个项目

Question

我正在尝试创建一个嵌套的弹性框布局,可以正确地(垂直地)拉伸所有列.它似乎工作得很好,除了在嵌套布局中拉伸一个项目.

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

我遇到的问题是,如果Right Aside比其他内容更长,则Header会垂直延伸.如果我试图覆盖Title align-self属性来阻止它拉伸没有任何反应.

一个清楚地显示问题的plunker.看看灰色区域(标题 - 不得长大):http://plnkr.co/edit/9VBSOKi0ipAy1QDpNAKb?p=preview

谢谢...

Answer 1

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

此布局中有3个嵌套的Flex容器.

#1 - 两个内部列

这些列包含在它们自己的flex父级中.flex-inner-columns.该<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.该<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父级的flex方向设置为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父级

所有东西都包裹在一个最终的外部容器中,该容器控制着右边的列.将.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>