时间戳

首页 > 解决方案 > CSS Flex 一个孩子顶另一个底

html - CSS Flex 一个孩子顶另一个底

问题描述

我想做的是让a元素在顶部和button底部，没有使用absolute或fix位置，只是flex有什么解决方案吗？已经button在底部但title不在顶部：

.all {
    display: flex;
    height: 300px;
}
.element1 {
    width: 50%;
    background: blue;
}
.element2 {
    background: red;
    width: 50%;
}
#details {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: self-end;
}
#details a {
    width: 100%;
}
#details button {
    width: 100%;
    height: 50px;
}
<div class="all">
  <div class="element1"></div>
  <div class="element2">
    <div id="details">
      <a>title</a>
      <button>Add TO Cart</button>
    </div>
  </div>
</div>

标签： htmlcssflexbox

解决方案

您可以通过使用flex-direction: column;on来实现，#details然后使用以下方法分隔子级justify-content: space-between;：

.all {
  display: flex;
  height: 300px;
  background: gray;
}

.element1 {
  width: 50%;
  background: blue;
}

.element2 {
  background: red;
  width: 50%;
}

#details {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#details a {
  width: 100%;
}

#details button {
  display: block;
  width: 100%;
  height: 50px;
}
<div class="all">
  <div class="element1"></div>
  <div class="element2">
    <div id="details">
      <a>title</a>
      <button>Add TO Cart</button>
    </div>
  </div>
</div>

推荐阅读