使元素粘在div的底部[重复]答案

【问题标题】：Make an element stick to the bottom of a div [duplicate]使元素粘在div的底部[重复]
【发布时间】：2018-01-17 11:40:18
【问题描述】：

以下代码生成一组蓝色框，其中两个框内显示一个小白框。我怎样才能让这些白盒子粘在蓝盒子的底部？我尝试将margin-top: auto; 添加到.test，但没有成功。

.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
    flex-wrap: wrap;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}

.test {
    background-color: white;
    width: 20px;
    height: 20px;
    margin-bottom: 0 auto;
}

<div class="flex-container">
  <div class="flex-item">flex item 1flex item 1flex item 1flex item 1flex 
  item 1<div class="test"></div></div>
  <div class="flex-item">flex item 2<div class="test"></div></div>
  <div class="flex-item">flex item 3</div>
  <div class="flex-item">flex item 3</div>  
  <div class="flex-item">flex item 3</div>  
</div>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

只需编辑您的 css 并将 position: relative 添加到 'flex-item, 和position: absolute '测试'。当然要加bottom: 0px才能发到底部

.flex-item {
  position: relative;
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}

.test {
  position: absolute;
background-color: white;
width: 20px;
height: 20px;
bottom: 0px;
}

【讨论】：

【解决方案2】：

将position: absolute; 和bottom: 0; 添加到那些.test 多维数据集（您也可以添加left: 0，但无论如何这是默认设置），并将position: relative; 添加到它们的容器中，让它们充当“锚”他们孩子的绝对地位。

.flex-container {
  display: -webkit-flex;
  display: flex;
  width: 400px;
  height: 250px;
  background-color: lightgrey;
  flex-wrap: wrap;
}

.flex-item {
  background-color: cornflowerblue;
  width: 100px;
  height: 100px;
  margin: 10px;
  position: relative;;
}

.test {
  background-color: white;
  width: 20px;
  height: 20px;
  position: absolute;
  bottom: 0;
}

<div class="flex-container">
  <div class="flex-item">flex item 1flex item 1flex item 1flex item 1flex item 1
    <div class="test"></div>
  </div>
  <div class="flex-item">flex item 2
    <div class="test"></div>
  </div>
  <div class="flex-item">flex item 3</div>
  <div class="flex-item">flex item 3</div>
  <div class="flex-item">flex item 3</div>
</div>

评论后补充：

关于评论中的附加问题：

您可以使用flex-direction: column 将弹性项目定义为弹性容器，并将margin-top: auto 应用于.test。但是，您需要将flex-item 的height 更改为min-height 才能使其扩展：

.flex-container {
  display: -webkit-flex;
  display: flex;
  width: 400px;
  height: 250px;
  background-color: lightgrey;
  flex-wrap: wrap;
}

.flex-item {
  background-color: cornflowerblue;
  width: 100px;
  min-height: 100px;
  margin: 10px;
  display: flex;
  flex-direction: column;
}

.test {
  background-color: white;
  width: 20px;
  height: 50px;
  margin-top: auto;
}

<div class="flex-container">
  <div class="flex-item">flex item 1flex item 1flex item 1flex item 1flex item 1
    <div class="test"></div>
  </div>
  <div class="flex-item">flex item 2
    <div class="test"></div>
  </div>
  <div class="flex-item">flex item 3</div>
  <div class="flex-item">flex item 3</div>
  <div class="flex-item">flex item 3</div>
</div>

【讨论】：

Tnx 为您解答。您能否告诉我如何确保在调整 .test 的高度（例如从 20px 到 50px）时，.flex-item 会随之调整大小，以使白框（.test）保持在底部和下方文本并且不与上面的文本重叠？
那行不通 - 绝对定位的元素独立于它们的父元素，因此更改它们的大小不会影响任何其他对象（并且可能会重叠）。
是的，我刚试过并注意到了。有没有办法解决这个问题？
我刚刚添加了第二个解决方案，看看它。
非常感谢 Johannes 的明确解决方案和解释

【解决方案3】：

margin 如果父级也是一个弹性框 （如果margin-x 有一个值）。

这里： margin:auto 0 0; 应该可以。

(margin:auto 0 0 auto ;会设置在右下角)

.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
    flex-wrap: wrap;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
        display: -webkit-flex;
    display: flex;
    flex-direction:column;
}

.test {
    background-color: white;
    width: 20px;
    height: 20px;
    margin-top:auto;
    margin-bottom: 0;
}

<div class="flex-container">
  <div class="flex-item">flex item 1flex item 1flex item 1flex item 1flex 
  item 1<div class="test"></div></div>
  <div class="flex-item">flex item 2<div class="test"></div></div>
  <div class="flex-item">flex item 3</div>
  <div class="flex-item">flex item 3</div>  
  <div class="flex-item">flex item 3</div>  
</div>

【讨论】：

【解决方案4】：

您可以直接在 flex child 上使用align-self。

.container {
  display: flex;
}

.place-at-bottom {
  align-self: flex-end;
}


/* ignore them */
.container {
  width: 200px;
  height: 200px;
  background: yellow;
}

.place-at-bottom {
  width: 50px;
  height: 50px;
  background: cyan;
  border: 1px solid black;
}

<div class="container">

  <div class="place-at-bottom"></div>
</div>

【讨论】：