时间戳

首页 > 解决方案 > 弹性盒不拉伸

html - 弹性盒不拉伸

问题描述

我目前正在用 Flex Box 做一些事情，我希望我的 flex box 可以拉伸，但我做不到。这是我的代码笔： https ://codepen.io/chevalierv/pen/bGdBKyg

  .FlexContainer {
      height: 65vh;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: stretch;
      align-content: stretch;
      justify-content: center;
      padding: 1em;
      background-color: red;
  }

.SecondChildContainer {
    align-self: flex-end;
    order: 2;
    flex: 1;
    flex-basis: 100%;
    background-color: green;
}

.FirstChildContainer {
    order: 1;
    flex-grow: 5;
    align-self: stretch;
    background-color: blue;
}
<div class="FlexContainer">
  <div class="FirstChildContainer">
    a
  </div>
  <div class="SecondChildContainer">
    a
  </div>
</div>

标签： htmlcssflexbox

解决方案

我已经清理了你的 CSS 并使它工作。请参阅下面的 jsfiddle：

https://jsfiddle.net/gqptemhu/

基本上，你的弹性容器需要的是

.FlexContainer {
      height: 65vh;
      display: flex;
      flex-direction: column;
  }

所以它知道垂直堆叠物品。

你用

 flex: 0 1;
 flex: 1 0;

在 flex 容器内的项目上，告诉哪些项目会增长，哪些项目会缩小。第一个数字对应于 flex-grow，第二个对应于 flex-shrink。它们都是相对数字，它们说明项目将增长/缩小到的空间百分比。

您可以在下面的链接中阅读有关 flexbox 以及如何使用它的更多信息：

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

推荐阅读