如何让div在容器div的底部对齐

Question

考虑这个小提琴：https://jsfiddle.net/vs9a4toz/

我希望我的按钮位于div的底部。

我尝试在他们的容器div上使用align-self: flex-end。但最终结果是div的内容在最后而不是div本身对齐。

.container {
  width: 600px;
  display: flex;
  flex-flow: row;
  border: 2px solid red;
}

.box1,
.box2,
.box3 {
  width: 100%;
  border: 1px solid blue;
  display: flex;
  flex-flow: column;
  size: 100px;
}

.content {
  text-align: center;
}

.buttons {
  display: flex;
  flex-flow: column;
}

<div class="container">

  <div class="box1">
    <div class="content">
      <p>HEJ</p>
    </div>
    <div class="buttons">
      <button>ONEONE</button>
      <button>TWOTWO</button>
    </div>
  </div>

  <div class="box2">
    <div class="content">
      <p>HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ </p>
    </div>
    <div class="buttons">
      <button>ONEONE</button>
      <button>TWOTWO</button>
    </div>
  </div>

  <div class="box3">
    <div class="content">
      <p>HEJ</p>
    </div>
    <div class="buttons">
      <button>ONEONE</button>
      <button>TWOTWO</button>
    </div>
  </div>

</div>

Answer 1

https://jsfiddle.net/eLuyursq/

{{1}}

只需添加{{1}}

即可

Answer 2

flex-grow: 1上的

.content足以让这项工作：

.content {
  text-align:center;
  flex-grow: 1;
}

.box列中将占用所有可用空间。 （谢谢@LGSon）

Answer 3

使用margin属性和flexbox

.container {
  width: 600px;
  display: flex;
  flex-flow: row;
  border: 2px solid red;
}

.box1,
.box2,
.box3 {
  width: 100%;
  border: 1px solid blue;
  display: flex;
  flex-flow: column;
  size: 100px;
}

.content {
  text-align: center;
}

.buttons {
  display: flex;
  flex-flow: column;
  margin-top: auto;
}

<div class="container">

  <div class="box1">
    <div class="content">
      <p>HEJ</p>
    </div>
    <div class="buttons">
      <button>ONEONE</button>
      <button>TWOTWO</button>
    </div>
  </div>

  <div class="box2">
    <div class="content">
      <p>HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ </p>
    </div>
    <div class="buttons">
      <button>ONEONE</button>
      <button>TWOTWO</button>
    </div>
  </div>

  <div class="box3">
    <div class="content">
      <p>HEJ</p>
    </div>
    <div class="buttons">
      <button>ONEONE</button>
      <button>TWOTWO</button>
    </div>
  </div>

</div>

Answer 4

尝试使用绝对定位，请参阅以下代码：

.buttons{
    position: absolute;
    bottom: 0px;
}

.box1,
.box2,
.box3 {
    width: 100%;
    border: 1px solid blue;
    display: flex;
    flex-flow: column;
    size: 100px;
    position: relative;
}

Answer 5

BSD

检查出来

https://jsfiddle.net/u1bx4473/1/

您需要position:relative div，然后position:absolute; bottom:0; width:100%按钮......

但如果你需要内容不被按钮隐藏，你需要一个容器，用于overflow:auto和固定宽度的内容......

有点像这样：https://jsfiddle.net/u1bx4473/2/

Answer 6

使用内容填充和按钮上的绝对位置的解决方案：

＆＃13;

＆＃13;

.container {
  width: 600px;
  display:flex;
  flex-flow: row;
  border: 2px solid red;
}

.box1, .box2, .box3 {
  width: 100%;
  border: 1px solid blue;
  size: 100px;
  position:relative;
}

.content {
  text-align:center;
  height: 100%;
  padding-bottom: 50px;
}

.buttons {
  position:absolute;
  bottom:0;
  width:100%;
  height:50px;
  display: flex;
  flex-flow: column;
}

＆＃13;

<div class="container">

  <div class="box1">
    <div class="content">
      <p>HEJ</p>
    </div>
    <div class="buttons">
        <button>ONEONE</button>
        <button>TWOTWO</button>
    </div>
  </div> 
  
    <div class="box2">
    <div class="content">
      <p>HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ </p>
    </div>
    <div class="buttons">
        <button>ONEONE</button>
        <button>TWOTWO</button>
    </div>
  </div> 
  
    <div class="box3">
    <div class="content">
      <p>HEJ</p>
    </div>
    <div class="buttons">
        <button>ONEONE</button>
        <button>TWOTWO</button>
    </div>
  </div> 

</div>

＆＃13;

＆＃13;

＆＃13;