Question

我有类似的东西：

.flex-container {
  display: flex;
  justify-content: center;
  padding: 5%;
  position: relative;
}

.box1 {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
}

<div class="flex-container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

我希望能够将box2放置在中间，同时将box1放置在flex容器的底部。问题是因为flex容器具有填充，底部仅将其定位到填充结束的位置。另一个问题是当我给box1绝对定位时，box2将重新定位以填充整个flex容器，因为box1不在流程中。

Answer 1

尚不清楚您到底想达到什么目的，但是如果我做对了，这应该作为解决方案。

.flex-container {
  display: flex;
  justify-content: center;
  padding: 5%;
  position: relative;
  border: 3px solid black;
}

div {
  text-align: center; // not necessary
}

.box1 {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 20%;
  border: 1px solid green;
}

.box2 {
  border: 1px solid red;
  height: 20px;
  width: auto;
  padding: 5px;
}

<div class="flex-container">
  <div class="box1">box1</div>
  <div class="box2">box2</div>
</div>

编辑：如果您确实想将元素居中，则需要将box或box2的填充作为人工height添加到容器中或使用calc()方法。

使用填充将div定位到flexbox的底部

1 个答案: