Question

使用CSS和flexbox，我不明白如何给div提供相同的高度＆＃34; a＆＃34;和＆＃34; b＆＃34;。我需要b变得更高，以便匹配一个高度。换句话说，灰色框应该与红色框一样高。

我的理解是，将flex:1设置为a和b就足够了，以便它们具有相同的高度。但事实并非如此。

我尝试将flex-basis:0设置为＆＃34; a＆＃34;和＆＃34; b＆＃34;，但内容被截断。我不能截断一个，我需要扩大。

＆＃13;

#cont1{
    display:flex;
    flex-direction:column;
}

#a{
    background-color:red;
    flex:1;
}

#b{
    background-color:grey;
    flex:1;
}

＆＃13;

<div id="cont1">
    <div id="a">
        <h1>title</h1>
        <h1>title</h1>
        <h1>title</h1>
        <h1>title</h1>
        <h1>title</h1>
        <h1>title</h1>
    </div>
    <div id="b">
        short text
    </div>
</div>

＆＃13;

include_directories

Answer 1

如果你能生存而没有flex，那么定位可以做到这一点。

#cont1{
}

#a{
    background-color:red;
    position: relative;
}

#b{
    background-color:grey;
    position: absolute;
    left: 0; top: 100%;
    width: 100%;
    height: 100%;
}

<div id="cont1">
    <div id="a">
      <h1> title </h1>
      <h1> title </h1>
      <h1> title title title title title title title title title</h1>
      <div id="b">
        short text
      </div>
    </div>
</div>

Answer 2

指定弹性容器的高度。

试试这个：

#cont { 
     display: flex;
     flex-direction: column;
     height: 400px;
}

您需要为要分发的Flex项创建已定义的空间。

更新（基于评论）

正确......这就是我需要实现的目标：http://www.jsfiddle.net/s2b0v4ph（观察   在宽屏幕上，因为有一个断点）

这就是问题所在：如果方框＃2变得更高，那就是对齐方式   在方框＃2和方框＃5之间断开：http://www.jsfiddle.net/s2b0v4ph/1

布局工作正常，编码。主要Flex容器（.flex-md）的flex项目正在伸展容器的整个高度。无论您向＃1框还是＃2框添加多少内容，包含框＃5和＃6的列都将具有相同的高度。

无论内容数量多少，主要弹性容器（<div class="row flex-md" id="row-quadrati">）中的所有列都是相等的高度。 http://jsfiddle.net/s2b0v4ph/1/

添加内容时框＃5与框＃2不对齐的原因是每个框都存在于不同的flex formatting context中。换句话说，这些盒子存在于不同的弹性容器中。

具体地，框＃1，＃2和＃3是#quadr-col-1的弹性项目，框＃4，＃5和＃6是#quadr-col-2的弹性项目。 #quadr-col-1和#quadr-col-2都是主要弹性容器的弹性项目，加倍为（嵌套）弹性容器本身。

因为这些盒子存在于单独的柔性容器中，所以它们没有理由共享相同的高度。如果要应用flex equal height功能，请将它们全部放在同一个Flex容器中。

Answer 3

我在javascript中解决了如下问题，但我仍然对css解决方案感兴趣：

{{1}}

小提琴：http://jsfiddle.net/s2b0v4ph/3/

Answer 4

诀窍是这部分

.xyz {
  width: 70%;
  box-shadow: 0 0 30px;
  text-align:center;
  -webkit-flex: 9 0 0; 
  flex: 9 0 0; 
}

http://codepen.io/damianocel/pen/XmxmQE

现在这些div将具有相同的高度，无论整体页面高度如何。

这是你所寻找的吗？

css flexbox：所有元素的高度相同？

4 个答案: