我有以下布局http://jsbin.com/joyetaqase/1/edit?html,output
使用flexBox我试图为.col div设置相同的高度和相同的宽度.
我的问题是:我怎样才能把< p>坚持在盒子的底部?
布局应如下所示:
我知道我可以制作< 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;
}
原文链接:https://www.f2er.com/html/425482.html