垂直对齐嵌套内容

Question

我有一个使用 flexbox 构建的网格，不仅可以提高灵活性（文字游戏！），还可以更轻松地使网格内的元素高度相同。我在控制框中内容的垂直对齐方面遇到了问题。

每个父容器都有两个嵌套容器：一个用于日期，另一个用于其余内容。第二个容器中的内容包括一个应该在父容器底部对齐的链接。请参阅第一张图片以了解其外观示例。

01 - Correct vertical alignment - full height.

当内容（示例中为城市、公司）没有填满容器的整个高度时，就会出现问题 - 它最终会为内容添加额外的空间。当按钮不与容器底部对齐时，空间位于底部。 （图2）当我让按钮与底部对齐（使用margin-top:auto）时，城市和日期之间就会出现空格。 （图三）

02 - Extra space at the bottom of the container.

03 - Extra space at the top of the container.

如果此问题已在其他地方得到解决，请提前致歉。我已经通过这些答案来完成当前的迭代：

• Flexbox vertical align specific content within a wrapper?
• Remove space (gaps) between multiple lines of flex items when they wrap

提前感谢您对我错过的任何指导或帮助！

/*---- FLEXBOX STYLING ----*/

#events-list {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: auto;
  flex-flow: row wrap;
  align-content: flex-end;
}

#events-list .event {
  flex: 0 0 32%;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  background-color: #e6e6e6;
  margin: 0 2% 1rem 0;
  border: solid 2px #666;
}

#events-list .event:nth-child(3n) {
  margin-right: 0;
}

#events-list .event .event-date {
  align-self: flex-start;
}

#events-list .event .event-details {
  display: flex;
  flex-direction: column;
  width: 100%;
}

#events-list .event .event-details .register {
  margin-top: auto;
}


/* ---- GENERIC VISUAL STYLING ----*/

#events-list .event {
  background-color: #e6e6e6;
  margin: 0 auto 1rem;
  border: solid 2px #666;
}

#events-list .event .event-date {
  width: 100%;
  text-align: center;
  background-color: #aaa;
  margin-bottom: 1rem;
}

#events-list .event .event-date p {
  display: inline-block;
  font: normal 2rem/1 "agenda-bold", Arial;
}

#events-list .event .event-date p:first-of-type {
  margin-right: 0.25rem;
}

#events-list .event .event-details .event-city {
  font: normal 1rem/1.5 "agenda-bold", Arial;
  padding: 0 1rem;
}

#events-list .event .event-details .event-time {
  padding: 0 1rem;
}

#events-list .event .event-details .event-bus {
  margin-bottom: 1rem;
  padding: 0 1rem;
}

#events-list .event .event-details .register {
  display: block;
  background-color: #666;
  text-align: center;
  line-height: 2.5rem;
  text-transform: uppercase;
  color: #fff;
}

<section id="events-list">
  <div class="event">
    <div class="event-date">
      <p>MAR 30</p>
    </div>
    <div class="event-details">
      <p class="event-city">City, US</p>
      <p class="event-bus">Company HQ - Company Double Line</p>
      <a class="register" href="#">RSVP</a>
    </div>
  </div>
  <div class="event">
    <div class="event-date">
      <p>MAR 30</p>
    </div>
    <div class="event-details">
      <p class="event-city">City, US</p>
      <p class="event-bus">Company HQ</p>
      <a class="register" href="#">RSVP on 4/13</a>
    </div>
  </div>
  <div class="event">
    <div class="event-date">
      <p>MAR 30</p>
    </div>
    <div class="event-details">
      <p class="event-city">City, US</p>
      <p class="event-bus">Company HQ - Company Double Line</p>
      <a class="register" href="#">RSVP</a>
    </div>
  </div>
</section>

Answer 1

首先将flex-direction: column 应用于#events-list .event 而不是flex-direction: row 以使内容垂直流动...

然后将flex:1 应用到.event-details div 以允许它占用.event div 中的剩余空间...

还从.event-details 中删除width:100% 和从.event-date 中删除align-self: flex-start...这里不需要。

注意：如果你使用flex-direction: column，flexbox的align-items和justify-content属性会相互切换

/*---- FLEXBOX STYLING ----*/

#events-list {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: auto;
  flex-flow: row wrap;
  align-content: flex-end;
}

#events-list .event {
  flex: 0 0 32%;
  display: flex;
  flex-direction: column;
  background-color: #e6e6e6;
  margin: 0 2% 1rem 0;
  border: solid 2px #666;
}

#events-list .event:nth-child(3n) {
  margin-right: 0;
}

#events-list .event .event-details {
  display: flex;
  flex-direction: column;
  flex: 1;
}

#events-list .event .event-details .register {
  margin-top: auto;
}


/* ---- GENERIC VISUAL STYLING ----*/

#events-list .event {
  background-color: #e6e6e6;
  margin: 0 auto 1rem;
  border: solid 2px #666;
}

#events-list .event .event-date {
  width: 100%;
  text-align: center;
  background-color: #aaa;
  margin-bottom: 1rem;
}

#events-list .event .event-date p {
  display: inline-block;
  font: normal 2rem/1 "agenda-bold", Arial;
}

#events-list .event .event-date p:first-of-type {
  margin-right: 0.25rem;
}

#events-list .event .event-details .event-city {
  font: normal 1rem/1.5 "agenda-bold", Arial;
  padding: 0 1rem;
}

#events-list .event .event-details .event-time {
  padding: 0 1rem;
}

#events-list .event .event-details .event-bus {
  margin-bottom: 1rem;
  padding: 0 1rem;
}

#events-list .event .event-details .register {
  display: block;
  background-color: #666;
  text-align: center;
  line-height: 2.5rem;
  text-transform: uppercase;
  color: #fff;
}

<section id="events-list">
  <div class="event">
    <div class="event-date">
      <p>MAR 30</p>
    </div>
    <div class="event-details">
      <p class="event-city">City, US</p>
      <p class="event-bus">Company HQ - Company Double Line</p>
      <a class="register" href="#">RSVP</a>
    </div>
  </div>
  <div class="event">
    <div class="event-date">
      <p>MAR 30</p>
    </div>
    <div class="event-details">
      <p class="event-city">City, US</p>
      <p class="event-bus">Company HQ</p>
      <a class="register" href="#">RSVP on 4/13</a>
    </div>
  </div>
  <div class="event">
    <div class="event-date">
      <p>MAR 30</p>
    </div>
    <div class="event-details">
      <p class="event-city">City, US</p>
      <p class="event-bus">Company HQ - Company Double Line</p>
      <a class="register" href="#">RSVP</a>
    </div>
  </div>
</section>

Answer 2

我解决了你的问题。尝试将第 15 行的 flex-direction: row wrap; 替换为 flex-direction: column;。

然后，您需要将height: 100%; 添加到 .event-details 类中。

/*---- FLEXBOX STYLING ----*/

#events-list {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: auto;
  flex-flow: row wrap;
  align-content: flex-end;
}

#events-list .event {
  flex: 0 0 32%;
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  background-color: #e6e6e6;
  margin: 0 2% 1rem 0;
  border: solid 2px #666;
}

#events-list .event:nth-child(3n) {
  margin-right: 0;
}

#events-list .event .event-date {
  align-self: flex-start;
}

#events-list .event .event-details {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

#events-list .event .event-details .register {
  margin-top: auto;
}


/* ---- GENERIC VISUAL STYLING ----*/

#events-list .event {
  background-color: #e6e6e6;
  margin: 0 auto 1rem;
  border: solid 2px #666;
}

#events-list .event .event-date {
  width: 100%;
  text-align: center;
  background-color: #aaa;
  margin-bottom: 1rem;
}

#events-list .event .event-date p {
  display: inline-block;
  font: normal 2rem/1 "agenda-bold", Arial;
}

#events-list .event .event-date p:first-of-type {
  margin-right: 0.25rem;
}

#events-list .event .event-details .event-city {
  font: normal 1rem/1.5 "agenda-bold", Arial;
  padding: 0 1rem;
}

#events-list .event .event-details .event-time {
  padding: 0 1rem;
}

#events-list .event .event-details .event-bus {
  margin-bottom: 1rem;
  padding: 0 1rem;
}

#events-list .event .event-details .register {
  display: block;
  background-color: #666;
  text-align: center;
  line-height: 2.5rem;
  text-transform: uppercase;
  color: #fff;
}

<section id="events-list">
  <div class="event">
    <div class="event-date">
      <p>MAR 30</p>
    </div>
    <div class="event-details">
      <p class="event-city">City, US</p>
      <p class="event-bus">Company HQ - Company Double Line</p>
      <a class="register" href="#">RSVP</a>
    </div>
  </div>
  <div class="event">
    <div class="event-date">
      <p>MAR 30</p>
    </div>
    <div class="event-details">
      <p class="event-city">City, US</p>
      <p class="event-bus">Company HQ</p>
      <a class="register" href="#">RSVP on 4/13</a>
    </div>
  </div>
  <div class="event">
    <div class="event-date">
      <p>MAR 30</p>
    </div>
    <div class="event-details">
      <p class="event-city">City, US</p>
      <p class="event-bus">Company HQ - Company Double Line</p>
      <a class="register" href="#">RSVP</a>
    </div>
  </div>
</section>