如何使用Flexbox将三个元素放在同一列中，第一个位于顶部，第二个和第三个位于剩余空间的中心？

Question

我有一个有三段的容器。第一个包含图片。第二个是那张照片的标题。第三是对图片的描述。

我需要照片在容器的顶部，剩下的两个段落在剩下的垂直空间的中间，显然标题位于顶部描述。

我能够得到的最接近这个要求的是将图片放在顶部，标题位于其下方（所以在剩余的垂直空间的顶部）以及剩余垂直空间中间的描述。这个的CSS将是：

.flexbox-container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.flexbox-container .one-fourth {
    background-color: #1E73BE;
    margin: 10px 10px;
    margin-bottom: 10px;
    max-width: 25%;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0px;
    display: flex;
    flex-direction: column;
}

.flexbox-container .one-fourth .image-name,
.flexbox-container .one-fourth .image-description {
    color: #fff;
    margin: 0;
    text-align: center;
}

.image {
    margin: 0;
}

.image-name {
    flex: 1;
}

.image-description {
    flex: auto;
}

有人知道如何修改它以达到我的需要吗？

更新 - 这是html标记：

<div class="flexbox-container">
    <div class="one-fourth">
        <p class="image"><img class="..."...></p>
        <p class="image-name"></p>
        <p class="image-description"></p>
    </div>
    <div class="one-fourth">
        <p class="image"><img class="..."...></p>
        <p class="image-name"></p>
        <p class="image-description"></p>
    </div>
    <div class="one-fourth">
        <p class="image"><img class="..."...></p>
        <p class="image-name"></p>
        <p class="image-description"></p>
    </div>
    <div class="one-fourth">
        <p class="image"><img class="..."...></p>
        <p class="image-name"></p>
        <p class="image-description"></p>
    </div>
</div>
<div class="flexbox-container">
    <div class="one-fourth">
        <p class="image"><img class="..."...></p>
        <p class="image-name"></p>
        <p class="image-description"></p>
    </div>
    <div class="one-fourth">
    ...and so on.

Answer 1

使用flexbox，原生是不可能的。

你需要包装＆＃34;居中＆＃34;在他们自己的元素中的项目，它占用剩余的高度并将内容置于其中。您还必须为列定义一个明确的高度... 或至少是浏览器可以协调的高度。

＆＃13;

＆＃13;

* {
  margin: 0;
}
.column {
  width: 50%;
  display: flex;
  flex-direction: column;
  height: 300px;
  margin: auto;
  border: 1px solid grey;
}
.img-wrap {
  text-align: center;
}
.wrap {
  flex: 1;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  background: pink;
}

＆＃13;

<div class="column">
  <div class="img-wrap">
    <img src="http://www.fillmurray.com/140/100" alt="" />
  </div>
  <div class="wrap">
    <h2 class="title">Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, fugiat.</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

作为一行

＆＃13;

＆＃13;

* {
  margin: 0;
}
.row {
  display: flex;
  width: 80%;
  margin: auto;
}
.column {
  padding: 1em;
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid grey;
}
.img-wrap {
  text-align: center;
}
.wrap {
  flex: 1;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  background: pink;
}

＆＃13;

<div class="row">
  <div class="column">
    <div class="img-wrap">
      <img src="http://www.fillmurray.com/140/100" alt="" />
    </div>
    <div class="wrap">
      <h2 class="title">Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, fugiat.</p>
    </div>
  </div>

  <div class="column">
    <div class="img-wrap">
      <img src="http://www.fillmurray.com/140/100" alt="" />
    </div>
    <div class="wrap">
      <h2 class="title">Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi ad non fuga cumque accusamus tempore obcaecati nihil reprehenderit suscipit, voluptas doloremque nostrum doloribus maxime? Possimus. Lorem ipsum dolor sit amet, consectetur adipisicing
        elit. Quis, veniam!</p>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是我的解决方案。

只需使用margin auto，您需要增加空间以使元素居中：

.flexbox-container {
  display: flex;
  width: 600px;
}
.flexbox-container .one-fourth {
  background-color: lightblue;
  width: 20%;
  display: flex;
  flex-direction: column;
  margin: 2px;
}
.image {
  background-color: blue;
  margin: 0px;
}
.one-fourth:nth-child(1) .image {
  height: 50px;
}
.one-fourth:nth-child(2) .image {
  height: 75px;
}
.one-fourth:nth-child(3) .image {
  height: 100px;
}
.one-fourth:nth-child(4) .image {
  height: 125px;
}
.image-name {
  height: 30px;
  background-color: green;
  margin: auto 0 0 0;
}
.image-description {
  height: 80px;
  background-color: tomato;
  margin: 0 0 auto 0;
}

<div class="flexbox-container">
  <div class="one-fourth">
    <p class="image"></p>
    <p class="image-name"></p>
    <p class="image-description"></p>
  </div>
  <div class="one-fourth">
    <p class="image"></p>
    <p class="image-name"></p>
    <p class="image-description"></p>
  </div>
  <div class="one-fourth">
    <p class="image"></p>
    <p class="image-name"></p>
    <p class="image-description"></p>
  </div>
  <div class="one-fourth">
    <p class="image"></p>
    <p class="image-name"></p>
    <p class="image-description"></p>
  </div>
</div>