如何对齐Flex容器底部没有绝对的内容？

所以，我基本上有2个容器是相同的宽度，但根据其内容可以有不同的“高度”。无论采用哪种高度最高，我都希望两者都具有相同的高度，所以我使用了可以完美工作的柔性盒。如何对齐Flex容器底部没有绝对的内容？

现在的事情是我想知道是否有可能对齐他们两个底部的内容。

我主要有：

<div class="flex-box"> 
    <div class="row event">MetTalks...</div> 
    <div class="row shop">Digital Shop...</div> 
</div> 

.flex-box { 
    display: flex; 
    width: 66%; 
    flex-direction: row; 
    justify-content: flex-start; 
    padding: 30px; 
} 

.row { 
    flex: 1; 
}

正如你可以看到here，他们同样采取了行（我只希望他们跨越第一个2/3）像我想，他们的高度是相同。但我希望能够对齐底部的按钮。

我已经尝试了一堆不能工作，比如做一个表里面的div的东西，但我不能得到高度伸展到该行的div的100％

我也可以不使用位置：按钮的绝对位置，因为它们在高度计算中被取出时重叠文本。

我甚至试图使每一个内部垂直对齐的柔性容器，但也没有延伸到100％的高度

来源

2015-03-31 Programmer Unextraordinair

你可以达到你想要绝对定位是什么，没有文字重叠。你可以为按钮设置一个固定的高度，比如说50px。然后，您必须将填充底部应用于等于按钮高度的框，并将底部边距加上顶部&。所以，如果你想让按钮位于盒子底部20px的位置，你可以在盒子上增加一个90px（50 + 20 + 20）的底部填充。如果您可以将代码提交给jsfiddle，则帮助起来会更容易。

来源

2015-03-31 19:28:52

所以这可以很好地保持按钮在底部而不会与文本重叠，但由于绝对定位，当按钮的宽度足够收缩时，按钮的宽度超过父（行）容器的填充极限。 – 2015-03-31 19:50:21

实际上，设置宽度到一定比例似乎工作出于某种原因。我认为绝对定位会打破这一点，但显然它不会！ – 2015-03-31 20:44:56

如何对齐Flex容器底部没有绝对的内容？

回答

相关问题