Flexbox与底部对齐 | Flexbox与底部对齐

本文介绍了Flexbox与底部对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有以下布局：

我知道我可以使< p> code> bottom：0; 但是我想用flexbox实现这一点，是可能的吗？

解决方案

您可以执行以下操作。给 display：flex; flex-direction：column; 至
.col 和 flex：1 0 auto; 至 h2

  .row {width：500px; font-family：monospace; display：flex;}。col {width：50％; border：1px solid＃000; padding：10px; box-sizing：border-box;显示：flex; flex-direction：column;} h2，p {font-weight：normal; margin：0;} h2 {flex：1 0 auto;}

 < div class =row> < div class =col> < h2> Lorem Ipsum仅仅是印刷和排版行业的虚拟文本。< / h2> < p>我的页脚< / p> < / div> < div class =col> < h2> Lorem Ipsum。< / h2> < p>我的页脚< / p> < / div> < / div>

I have the following layout http://jsbin.com/joyetaqase/1/edit?html,css,output

<div class="row">

    <div class="col">
      <h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h2>
      <p>my footer</p>
    </div>

     <div class="col">
      <h2>Lorem Ipsum.</h2>
      <p>my footer</p>
    </div>

  </div>

Using flexbox I'm trying to make same height and same width to the .col divs.

My question is: how can I put the <p> to stick at the bottom of the box?

Layout should look like:

I know I can make the <p> absolute and use bottom:0; but I want to achieve this with flexbox, is it possible?

Can someone explain?

解决方案

You can do following way. Give display: flex; flex-direction: column; to.col and flex: 1 0 auto; to h2

.row {
  width: 500px;
  font-family: monospace;
  display:flex;
}

.col {
  width: 50%;
  border: 1px solid #000;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
    flex-direction: column;
}

h2, p {
  font-weight: normal;
  margin: 0;
}

h2 {
    flex: 1 0 auto;
}

 <div class="row">


    <div class="col">
      <h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h2>
      <p>my footer</p>
    </div>

     <div class="col">
      <h2>Lorem Ipsum.</h2>
      <p>my footer</p>
    </div>


  </div>

Updated JSBin

这篇关于Flexbox与底部对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！