Question

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

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

01 - Correct vertical alignment - full height.

当内容（示例中的城市，公司）未填满容器的整个高度时，问题就会出现 - 它最终会为内容添加额外的空间。当按钮未与容器底部对齐时，空间位于底部。（图2）当我按下按钮与底部对齐（使用composer selfupdate）时，空间就会出现在城市和日期之间。（图3）

02 - Extra space at the bottom of the container.

03 - Extra space at the top of the container.

如果在其他地方已经解决了这个问题，请事先道歉。我已经通过这些答案来实现当前的迭代：

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

margin-top:auto

/*---- 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;
}

Answer 1

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

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

＆＃13;

/*---- 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;
}

＆＃13;

<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>

＆＃13;

Answer 2

首先将flex-direction: column应用于#events-list .event而不是flex-direction: row，以便垂直播放内容......

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

同时从[{1}}移除width:100%，从.event-details移除align-self: flex-start ...此处不需要。

注意 ：如果您使用.event-date，Flexbox的flex-direction: column和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;
}

垂直对齐嵌套内容

2 个答案: