展开子元素以填充父元素高度时避免多余的 flex/flex-grow答案

【问题标题】：Avoid redundant flex/flex-grow when expanding children to fill parent height展开子元素以填充父元素高度时避免多余的 flex/flex-grow
【发布时间】：2019-11-09 07:08:57
【问题描述】：

有没有一种方法可以将嵌套元素放置在远离父容器的容器底部，而无需手动将所有嵌套包装器设置为 flex/flex-grow？即，更少的 CSS 规则。

* {
  box-sizing: border-box;
}

.example {
  display: flex;
}
.example .body-B {
  margin-left: 1rem;
}

.body-B {
  display: flex;
}
.body-B .wrapper-1,
.body-B .wrapper-2 {
  display: flex;
  flex-grow: 2;
}
.body-B .wrapper-1 {
  flex-direction: column;
}
.body-B .actions {
  align-items: flex-end;
  display: flex;
  width: 100%;
  justify-content: space-evenly;
}

[class^=body] {
  border: 5px solid black;
  height: 500px;
  width: 23rem;
}
[class^=body] .title {
  border: 3px dotted grey;
  display: flex;
  justify-content: center;
}
[class^=body] .wrapper-1 {
  border: 3px solid green;
}
[class^=body] .wrapper-2 {
  border: 3px solid red;
}
[class^=body] .actions {
  border: 3px solid blue;
}

<div class="example">
  <div class="body-A">
    <div class="wrapper-1">
      <p class="title">Naturally positioned at top</p>
      <div class="wrapper-2">
        <div class="actions">
          <button class="action">click</button>
          <button class="action">click</button>      
        </div>
      </div>
    </div>
  </div>
  <div class="body-B">
    <div class="wrapper-1">
      <p class="title">Lots of<code>display: flex</code></p>
      <div class="wrapper-2">
        <div class="actions">
          <button class="action">click</button>
          <button class="action">click</button>      
        </div>
      </div>
    </div>
  </div>
</div>

是否有一个属性/模式可以让这个基本功能适用于所有孩子？

【问题讨论】：

另一个问题是为什么所有这些嵌套？
为什么不简单地将wrapper-2 放在底部？我猜会更容易
是的，如果我没有嵌套，那显然不是问题。但事实并非如此。

标签： html css sass flexbox

【解决方案1】：

尝试绝对定位。将此添加到您的代码中：

[class^=body] {
  border: 5px solid black;
  height: 500px;
  width: 23rem;
  position: relative; /* new; set bounding box */
}

[class^=body] .wrapper-2 {
  border: 3px solid red;

  /* new */
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;

}
[class^=body] .actions {
  border: 3px solid blue;

  /* new */
  display: flex;
  justify-content: space-around;
}

* {
  box-sizing: border-box;
}

.example {
  display: flex;
}
.example .body-B {
  margin-left: 1rem;
}

.body-B {
  display: flex;
}
.body-B .wrapper-1,
.body-B .wrapper-2 {
  display: flex;
  flex-grow: 2;
}
.body-B .wrapper-1 {
  flex-direction: column;
}
.body-B .actions {
  align-items: flex-end;
  display: flex;
  width: 100%;
  justify-content: space-evenly;
}

[class^=body] {
  border: 5px solid black;
  height: 500px;
  width: 23rem;
  position: relative; /* new; set bounding box */
}
[class^=body] .title {
  border: 3px dotted grey;
  display: flex;
  justify-content: center;
}
[class^=body] .wrapper-1 {
  border: 3px solid green;
}
[class^=body] .wrapper-2 {
  border: 3px solid red;
  /* new */
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

[class^=body] .actions {
  border: 3px solid blue;
  /* new */
  display: flex;
  justify-content: space-around;
}

<div class="example">
  <div class="body-A">
    <div class="wrapper-1">
      <p class="title">Naturally positioned at top</p>
      <div class="wrapper-2">
        <div class="actions">
          <button class="action">click</button>
          <button class="action">click</button>      
        </div>
      </div>
    </div>
  </div>
  <div class="body-B">
    <div class="wrapper-1">
      <p class="title">Lots of<code>display: flex</code></p>
      <div class="wrapper-2">
        <div class="actions">
          <button class="action">click</button>
          <button class="action">click</button>      
        </div>
      </div>
    </div>
  </div>
</div>

jsFiddle demo

【讨论】：

【解决方案2】：

如果你想让你的元素保持流畅，你可以尝试以下方法：

[class^=body] .wrapper-1 {
  height:100%;
  display:flex;
  flex-direction:column;
}
[class^=body] .wrapper-2 {
  margin-top:auto; 
}
[class^=body] .actions {
  display: flex;
  justify-content: space-evenly;
}

完整代码：

* {
  box-sizing: border-box;
}
.example {
  display: flex;
}
.example .body-B {
  margin-left: 1rem;
}

[class^=body] {
  border: 5px solid black;
  height: 500px;
  position: relative;
  width: 23rem;
}
[class^=body] .title {
  border: 3px dotted grey;
  display: flex;
  justify-content: center;
}
[class^=body] .wrapper-1 {
  border: 3px solid green;
  height:100%;
  display:flex;
  flex-direction:column;
}
[class^=body] .wrapper-2 {
  border: 3px solid red;
  margin-top:auto;
}
[class^=body] .actions {
  border: 3px solid blue;
  display: flex;
  justify-content: space-evenly;
}

<div class="example">
  
  <div class="body-A">
    <div class="wrapper-1">
      <p class="title">Naturally positioned at top</p>
      <div class="wrapper-2">
        <div class="actions">
          <button class="action">click</button>
          <button class="action">click</button>      
        </div>
      </div>
    </div>
  </div>
  
  <div class="body-B">
    <div class="wrapper-1">
      <p class="title">Lots of<code>display: flex</code></p>
      <div class="wrapper-2">
        <div class="actions">
          <button class="action">click</button>
          <button class="action">click</button>      
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：