Question

我有一个父容器，里面有一些子组件。最后一个孩子必须放在容器的底部。我尝试使用justify-content: space-between，但它并不适合我，因为我需要最后一个元素和其他元素之间的空间更大更明显。我最终尝试position:absolute，bottom: 0，但孩子的宽度大于父母。

也许有更好的方法通过与flex混合来做到这一点，只是没有能够做到。

＆＃13;

.Parent {
  background: #F8F8F8;
  height: 400px;
  padding: 20px;
  width: 395px;
  position: relative;
  max-width: 395px;
  border: solid 1px red;
}

.First--Child {
  border: solid 1px blue;
  height: 40px;
  margin: 10px 0;
}

.Second--Child {
  border: solid 1px green;
  height: 40px;
  margin: 10px 0;
}

.Third--Child {
  border: solid 1px violet;
  height: 40px;
  margin: 10px 0;
}

.Last--Child {
  border: solid 1px cyan;
  height: 60px;
  position: absolute;
  bottom: 0;
  width: 100%;
  margin: 0 0 10px 0;
  display: flex;
  justify-content: space-between;
}

.Left--Button,
.Right--Button {
  border: solid 1px gray;
  width: calc(100% - 300px);
}

＆＃13;

<div class='Parent'>
  <div class='First--Child'>
  </div>
  <div class='Second--Child'>
  </div>
  <div class='Third--Child'>
  </div>
  <div class='Last--Child'>
    <button class='Left--Button'>Left</button>
    <button class='Right--Button'>Right</button>
  </div>
</div>

＆＃13;

Answer 1

最后一个孩子的宽度不比父母宽 - 它的宽度相同。这是导致它不对齐的边际。

如果底部位置符合您的需要，您可以通过删除父级的填充，将子级设置为：

来对水平对齐进行排序。

left: -20px

或

margin-left: -20px

，或添加

box-sizing:border-box

到父母

Answer 2

如果你必须使用这种布局技巧，你可以计算最后一个孩子的宽度减去父母的填充。

＆＃13;

.Parent {
  background: #F8F8F8;
  height: 400px;
  padding: 20px;
  width: 395px;
  position: relative;
  max-width: 395px;
  border: solid 1px red;
}

.First--Child {
  border: solid 1px blue;
  height: 40px;
  margin: 10px 0;
}

.Second--Child {
  border: solid 1px green;
  height: 40px;
  margin: 10px 0;
}

.Third--Child {
  border: solid 1px violet;
  height: 40px;
  margin: 10px 0;
}

.Last--Child {
  border: solid 1px cyan;
  height: 60px;
  position: absolute;
  bottom: 0;
  width: calc(100% - 40px);
  margin: 0 0 10px 0;
  display: flex;
  justify-content: space-between;
}

.Left--Button,
.Right--Button {
  border: solid 1px gray;
  width: calc(100% - 300px);
}

＆＃13;

<div class='Parent'>
  <div class='First--Child'>
  </div>
  <div class='Second--Child'>
  </div>
  <div class='Third--Child'>
  </div>
  <div class='Last--Child'>
    <button class='Left--Button'>Left</button>
    <button class='Right--Button'>Right</button>
  </div>
</div>

＆＃13;

Answer 3

试试这个CSS。我将按钮拆分为两个类，然后将它们浮动，同时为填充添加高度百分比。这假设您可以绝对定位。

    .Parent {
        background: #F8F8F8;
        height: 400px;
        padding: 20px;
        width: 395px;
        position: relative;
        max-width: 395px;
        border: solid 1px red;
    }

    .First--Child {
        border: solid 1px blue;
        height: 40px;
        margin: 10px 0;
    }

    .Second--Child {
        border: solid 1px green;
        height: 40px;
        margin: 10px 0;
    }

    .Third--Child {
        border: solid 1px violet;
        height: 40px;
        margin: 10px 0;
    }

    .Last--Child {
        border: solid 1px cyan;
        height: 60px;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        display: block;
        justify-content: space-between;
    }

    .Left--Button {
        height:100%;
        float:left;
        border: solid 1px gray;
        width: calc(100% - 300px);
    }
    .Right--Button {
        height: 100%;
        float: right;
        border: solid 1px gray;
        width: calc(100% - 300px);
    }

Answer 4

最后一个孩子必须放在容器的底部。我尝试使用justify-content: space-between，但它对我不起作用，因为我需要最后一个元素和其他元素之间的空间更大更明显。

使用justify-content: space-between（在垂直容器中）或align-content: space-between（在水平容器中），您可以将最后一项固定到底部，而不会影响兄弟姐妹的位置，仅限于有两个项目（一个停留在顶部，另一个停留在底部）。

但是如果有两个以上的项目，那么这个方法将不起作用，因为space-between在项目之间均匀分配空间，导致第一个和最后一个之间的项目展开。

由于容器中有两个以上的项目，因此需要另一种方法。

绝对定位确实有效。它将最后一项固定到底部。但是，它也会从正常流程中删除该项目，这意味着它不占用空间，兄弟姐妹可以重叠它。

然而，Flexbox提供了一个干净而有效的替代方案： auto 边距。通过将最后一项设置为margin-top: auto，它将移至容器的底部，而其兄弟姐妹仍然位于顶部。

以下是完整的说明，其中包括space-between和自动边距的比较：

In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

.Parent {
  display: flex;              /* new */
  flex-direction: column;     /* new */
  height: 400px;
  padding: 20px;
  max-width: 395px;
  border: solid 1px red;
  background: #F8F8F8;
}

.First--Child {
  border: solid 1px blue;
  height: 40px;
  margin: 10px 0;
}

.Second--Child {
  border: solid 1px green;
  height: 40px;
  margin: 10px 0;
}

.Third--Child {
  border: solid 1px violet;
  height: 40px;
  margin: 10px 0;
}

.Last--Child {
  border: solid 1px cyan;
  height: 60px;
  margin: auto 0 10px 0;        /* adjustment to margin-top */
  display: flex;
  justify-content: space-between;
}

.Left--Button,
.Right--Button {
  border: solid 1px gray;
  width: calc(100% - 300px);
}

<div class='Parent'>
  <div class='First--Child'></div>
  <div class='Second--Child'></div>
  <div class='Third--Child'></div>
  <div class='Last--Child'>
    <button class='Left--Button'>Left</button>
    <button class='Right--Button'>Right</button>
  </div>
</div>

为什么我的立场：绝对的孩子溢出我父母的边界？

4 个答案: