html – Flexbox与底部对齐

前端之家收集整理的这篇文章主要介绍了html – Flexbox与底部对齐前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我有以下布局http://jsbin.com/joyetaqase/1/edit?html,output

使用flexBox我试图为.col div设置相同的高度和相同的宽度.

我的问题是:我怎样才能把< p>坚持在盒子的底部

布局应如下所示:

enter image description here

我知道我可以制作< p>绝对和使用底部:0;但是我想用flexBox实现这个目标,有可能吗?

谁能解释一下?

最佳答案
你可以采取以下方式.给出显示:flex;弯曲方向:柱;至
.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;
  display: flex;
    flex-direction: column;
}

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

h2 {
    flex: 1 0 auto;
}
 

Updated JSBin

原文链接:https://www.f2er.com/html/425482.html

猜你在找的HTML相关文章