CSS Flex的一个孩子的顶部另一个底部

Question

我想做的是使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>

Answer 1

您可以通过在#details上使用flex-direction: column;来实现这一点，然后使用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>

Answer 2

您可以在两个孩子身上设置flex，然后使用align-self，先使用flex-start，再使用flex-end

.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;
}
#details a {
width: 100%;
display: flex;
align-self: flex-start;
}
#details button {
width: 100%;
height: 50px;
display: flex;
align-self: flex-end;
}

<div class="all">
<div class="element1"></div>
<div class="element2">
<div id="details">
<a>title</a>
<button>Add TO Cart</button>
</div>
</div>
</div>

Answer 3

当你在使用flexx时，你应该充分利用它。

对于伸缩项，如果可以，设置flex-grow:来决定它们的宽度而不是%。
如你所见，正确使用它可以减少代码。

标题在顶部，按钮在底部，使用flex-direction: column和justify-content: space-between。

.all {
display: flex;
height: 300px;
}
.element1 {
flex-grow: 2;
background: blue;
}
.element2 {
flex-grow: 1;
background: red;
}
#details {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
#details button {
width: 100%;
height: 50px;
}

<div class="all">
<div class="element1">&nbsp;</div>
<div class="element2">
<div id="details">
<a>title</a>
<button>Add TO Cart</button>
</div>
</div>
</div>