html - flex 元素中的底部对齐文本

Question

我在一个网站上工作，那里有成排的按钮 - 它们是一个图像，然后是一个 h3，然后是一个按钮，所有按钮都堆叠在一起。

这些都是使用 flexbox 和 flex-direction: column 以及一系列 margin-top: auto 规则显示的。

h3 有时会分成两行。发生这种情况时，按钮文本与 h3 标记的中心对齐:有点像彼此相邻的连字符和等号。

- = = 而不是 - - -

客户希望 h3 文本的底线对齐。我不知道该怎么做...有人可以帮忙吗？

https://codepen.io/anon/pen/zLVMPo

div.row {
  width: 100%;
  float: left;
  background-repeat: no-repeat !important;
}

a {
  color: #337ab7;
  text-decoration: none;
}

.service-square-row .span4,
.service-square-row .span3,
.service-square-row .span6 {
  display: flex;
  flex-direction: column;
}

.service-square-row .wrapper {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

.services.service-square-row .span4 {
  width: 260px;
  border-radius: 3px;
  margin: 10px;
  position: relative;
  background: #013ca6;
  max-width: 260px;
  height: 300px;
}

.service-square p:first-child {
  margin-top: 15px;
  height: 126px;
}

.service-square-row .flex-link .span4 img,
.service-square-row .flex-link .span3 img {
  max-height: 126px;
}

img {
  vertical-align: middle;
}

img,
video {
  height: auto;
  max-width: 100%;
}

.service-square-row .flex-link img,
.service-square-row .flex-link img {
  height: 126px;
  width: 126px
}

.service-square-row h3 {
  margin-top: auto;
  font-size: 20px;
  width: 95%;
  padding: 0;
  margin-left: 2.5%;
  margin-right: 2.5%;
  color: white;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 25px;
}

.service-square-row .service-square p:last-child {
  margin-top: auto;
  margin-bottom: 30px;
  text-align: center;
}

a.btn-bt.default,
a.btn-bt.alternate {
  font-weight: 400;
  border-radius: 4px;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0;
  padding: 10px 50px;
}

a.btn-bt.alternate {
  color: #ffffff;
  font-size: 14px;
  background: #e31d1a;
  letter-spacing: px;
}

<div class="row three-thirds services service-square-row  default-padding light-header light-content" style="">

  <div class="wrapper">
    <a class="flex-link" href="/electronics-restoration/">
      <div class="span4 service-square sq-1 service-1" style="border-style:;">
        <p style="text-align: center;"><img class="alignnone size-full wp-image-484" src="https://via.placeholder.com/120x120" alt="" width="120" height="120"></p>

        <h3 style="text-align: center;">Electronics</h3>
        <p style="text-align: center;"><a class="btn-bt alternate" href="/electronics-restoration/">Learn More</a></p>
      </div>
    </a>
    <a class="flex-link" href="/art-and-document-recovery/">
      <div class="span4 service-square sq-2 service-2" style="border-style:;">
        <p style="text-align: center;"><img class="alignnone size-full wp-image-485" src="https://via.placeholder.com/120x120" alt="" width="106" height="139"></p>

        <h3 style="text-align: center;">Art &amp; Document Recovery</h3>
        <p style="text-align: center;"><a class="btn-bt alternate" href="/art-and-document-recovery/">Learn More</a></p>
      </div>
    </a>
    <a class="flex-link" href="#">
      <div class="span4 service-square sq-3 service-3" style="border-style:;">
        <p style="text-align: center;"><img class="alignnone size-full wp-image-486" src="https://via.placeholder.com/120x120" alt="" width="140" height="143"></p>

        <h3 style="text-align: center;">Wind, Hurricane, &amp; Tornado</h3>
        <p style="text-align: center;"><a class="btn-bt alternate" href="#">Learn More</a></p>
      </div>
    </a>
  </div>
</div>

编辑:不幸的是，codepen 似乎对我粘贴到其中的 HTML 的解释与 Wordpress 不同......因此我让每个人都使用的 codepen 产生了我无法在我的现​​场网站上使用的解决方案。哦，好吧——我最终还是在现场网站上搞清楚了。抱歉没有早点注意到。

Answer 1

您将“按钮”设置为列方向 flex 容器:

.service-square-row .span4  {
    display: flex;
    flex-direction: column;
}

但是容器的第一个子项( flex 元素)被设置为 flex-grow: 0，这是默认设置。所以 h3 文本的运动范围有限。

试试这个:

.span4 > .flex-link {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: green;
}

.service-square-row .service-square p:last-child {
    /* margin-top: auto; */
    margin-bottom: 30px;
    text-align: center;
}

revised codepen

div.row {
  width: 100%;
  float: left;
  background-repeat: no-repeat !important;
}

a {
  color: #337ab7;
  text-decoration: none;
}

.service-square-row .span4,
.service-square-row .span3,
.service-square-row .span6 {
  display: flex;
  flex-direction: column;
}

.service-square-row .wrapper {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

.services.service-square-row .span4 {
  width: 260px;
  border-radius: 3px;
  margin: 10px;
  position: relative;
  background: #013ca6;
  max-width: 260px;
  height: 300px;
}

.service-square p:first-child {
  margin-top: 15px;
  height: 126px;
}

.service-square-row .flex-link .span4 img,
.service-square-row .flex-link .span3 img {
  max-height: 126px;
}

img {
  vertical-align: middle;
}

img,
video {
  height: auto;
  max-width: 100%;
}

.service-square-row .flex-link img,
.service-square-row .flex-link img {
  height: 126px;
  width: 126px
}

.service-square-row h3 {
  margin-top: auto;
  font-size: 20px;
  width: 95%;
  padding: 0;
  margin-left: 2.5%;
  margin-right: 2.5%;
  color: white;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 25px;
}

.service-square-row .service-square p:last-child {
  /* margin-top: auto; */
  margin-bottom: 30px;
  text-align: center;
}

a.btn-bt.default,
a.btn-bt.alternate {
  font-weight: 400;
  border-radius: 4px;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0;
  padding: 10px 50px;
}

a.btn-bt.alternate {
  color: #ffffff;
  font-size: 14px;
  background: #e31d1a;
  letter-spacing: px;
}

.span4>.flex-link {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: green;
  /* demo only; illustrates full range of element */
}

<div class="row three-thirds services service-square-row  default-padding light-header light-content" style="">

  <div class="wrapper">
    <a class="flex-link" href="/electronics-restoration/">
      <div class="span4 service-square sq-1 service-1" style="border-style:;">
        <p style="text-align: center;"><img class="alignnone size-full wp-image-484" src="https://via.placeholder.com/120x120" alt="" width="120" height="120"></p>

        <h3 style="text-align: center;">Electronics</h3>
        <p style="text-align: center;"><a class="btn-bt alternate" href="/electronics-restoration/">Learn More</a></p>
      </div>
    </a>
    <a class="flex-link" href="/art-and-document-recovery/">
      <div class="span4 service-square sq-2 service-2" style="border-style:;">
        <p style="text-align: center;"><img class="alignnone size-full wp-image-485" src="https://via.placeholder.com/120x120" alt="" width="106" height="139"></p>

        <h3 style="text-align: center;">Art &amp; Document Recovery</h3>
        <p style="text-align: center;"><a class="btn-bt alternate" href="/art-and-document-recovery/">Learn More</a></p>
      </div>
    </a>
    <a class="flex-link" href="#">
      <div class="span4 service-square sq-3 service-3" style="border-style:;">
        <p style="text-align: center;"><img class="alignnone size-full wp-image-486" src="https://via.placeholder.com/120x120" alt="" width="140" height="143"></p>

        <h3 style="text-align: center;">Wind, Hurricane, &amp; Tornado</h3>
        <p style="text-align: center;"><a class="btn-bt alternate" href="#">Learn More</a></p>
      </div>
    </a>
  </div>
</div>