在顶部、中心和底部对齐项目不起作用答案

【问题标题】：Align items at top, center and bottom is not working在顶部、中心和底部对齐项目不起作用
【发布时间】：2017-07-31 21:06:25
【问题描述】：

我有一个 div，左边有一个图像，右边有一些信息（一个跨度、一个 h3 和另一个跨度）。我希望图像右侧的第一个跨度位于顶部，h3 位于中心，另一个跨度位于底部。但这不起作用。同样在分隔符 div 的右侧，我有一个我也想定位在底部的链接和一个我想定位在中心的跨度。

你知道问题出在哪里吗？

示例：https://jsfiddle.net/ct1ghpk2/2/

HTML：

 <div class="item">
    <img src="">
    <div class="item_info">
      <span class="align-t">Span aligned at top</span>
      <h3>Title aligned at center</h3>
      <span class="align-b">Span aligned at bottom</span>
    </div>
    <div class="item_separator"></div>
    <div class="item_details">
      <span>Span aligned at center</span>
      <a href="">Link aligned at bottom</a>
    </div>
  </div>

CSS：

.item{
  background-color:white;
  display: flex;
  margin-bottom: 20px;
  align-items: flex-start;
  padding: 10px;
  justify-content: space-between;
  height: 10em;
  border:1px solid red;
}

.item img{
  width: 20%;
  height: 100%;
}

.item_info{
  margin-left: 10px;
  flex-basis: 64%;
  display:flex;
  flex-direction:column;
}

.item_info .align-t{
  color:gray;
  font-size: 0.8em;
  margin-bottom: 20px;
}

.item_info h3{
  font-size: 1em;
  text-align: justify;
  margin-bottom: 20px;
}

.item-info .align-b{
}

.item_separator{
  height:100%;
  width:1px;
  background-color:red;
}

.item_details{
  flex-basis: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.item_details span{
  font-size: 0.85em;
  margin-bottom: 10px;
  color:gray;
}

.item_details a{
  font-size: 0.85em;
  padding: 10px;
  border-radius: 4px;
  width: 100%;
  text-align: center;
}


img {
  width: 100%;
  max-width: 100%;
  vertical-align: middle;
  margin: 0;
}

【问题讨论】：

标签： html css flexbox

【解决方案1】：

给.item-info 100% 的高度，使其成为其父级的完整高度。然后，您可以将弹性框属性justify-content: space-between; 添加到.item-info 以使 div 中的内容按您想要的方式间隔。

.item-info {
    #yourStyles
    height: 100%;
    justify-content: space-between;
}

请参阅this link，了解有关 css flex box 以及您在使用它时可用的属性的更多详细信息。

至于.item-details...

.item_details{
    #yourStyles
    height: 100%;
    justify-content: flex-end;
}

.item_details span{
    #yourStyles
    margin-top: 25%;
    text-align: center;
}

justify-content: flex-end; for a column 使内容从底部开始并上升...在该 div 内的 span 中添加 25% 的上边距将为您提供所需的间距，同时拥有其他所有内容被推到底部。

【讨论】：

这不是 .items_details 的准确解决方案
@Bhawna 我在 OP 提供的 jsfiddle 中进行了上面建议的更改，它对我来说效果很好。跨度（他们想要在中心）和链接（他们想要在底部）在适当的位置。让我知道您所说的“准确”解决方案是什么意思。
很抱歉我上面发送的小提琴不一样。我编辑了。你能分享一下你提供的解决方案吗
如果您想查看我建议的代码的不同之处，您可以将我在答案中输入的 4 行代码复制/粘贴到您正在查看的任何 jsfiddle 中。其他一切都已经在 OP 共享的小提琴中了。我正在开车，所以我无法再次进行更改并将它们保存在公共小提琴中。

【解决方案2】：

根据我的理解，您要求的解决方案必须是这样的。

我所做的更改在此。

.item_details{
  flex-basis: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;
}

.item_details span{
  font-size: 0.85em;
  color:gray;
}

.item_details a{
  font-size: 0.85em;
  border-radius: 4px;
  width: 100%;
  text-align: center;
  position: absolute;
  bottom:0;
}

小提琴：https://jsfiddle.net/ct1ghpk2/6/

【讨论】：