Question

我想在父块中放置两个块 - 一个在顶部，另一个在底部。例如，父母在目录中互相跟随。为了实现我的目标，我使用了灵活的布局

<div class="container">
    <div class="item">

        <div class="holder">
            <div class="content">
                First content block<br/>
                First content block<br/>
                First content block<br/>
            </div>
            <div class="bottom"></div>
        </div>

    </div>
    <div class="item">

      <div class="holder">
          <div class="content">
              Second content block<br/>
              Second content block<br/>
              Second content block<br/>
              Second content block<br/>
              Second content block<br/>
              Second content block<br/>
          </div>
          <div class="bottom"></div>
      </div>

    </div>
</div>

CSS是（webkit前缀从中删除，存在于jsfiddle中）

.container{
    display: flex;
    flex-wrap: wrap;
    align-content: stretch;
}
.item{
    width: 50%;
    background-color: #fff;
}
.holder{
    display: flex;
    flex-direction:column;
    align-content:space-between;
    height: 100%;
}
.content{
    flex: 1; // Added
    width: 100%;
    background-color: #eee;
}
.bottom{
    width: 100%;
    height: 20px;
    background-color: #f00;
}

jsfiddle https://jsfiddle.net/2nowks6p/5/中的代码。

布局有问题，因为底部块没有位于底部。任何人都可以向我解释，为什么会这样？

正如@ketan answear将flex: 1添加到.content解决Firefox中的问题，而不是Chrome和Opera。

Answer 1

只需将flex:1;提交给.content即可使底部div位于底部。

.content{
  width: 100%;
  background-color: #eee;
  flex:1;
}

<强> Updated Fiddle

Answer 2

我更新了您的演示，使其适用于chrome＆amp; Firefox浏览器。
我在.item上添加了display: flex;，在.holder

上添加了flex: 1;

https://jsfiddle.net/2nowks6p/8/

如何在flex块中定位块？

2 个答案: