Flex项目中的底部对齐文本

Question

I am working on a website where we have rows of buttons - they are an image, then an h3, and then a button, all stacked on top of each other.

These are all displayed using flexbox and flex-direction: column and a series of margin-top: auto rules.

The h3s sometimes break onto two lines. When this happens, the button text aligns to the center of the h3 tag: sort of like a hyphen and an equal sign next to each other.

- = = instead of - - -

Client would like the bottom line of the h3 text to align. I can't figure out how to do this exactly... Can anyone help?

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> 

EDIT: Unfortunately, codepen seems to have interpreted the HTML I pasted into it differently that Wordpress did... And so the codepen I had everyone work produced solutions I couldn't use on my live site. Oh well -- I ended up figuring it out on the live site anyways. Sorry for not noticing earlier.

Answer 1

You have the "buttons" set to column-direction flex containers:

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

But the first child (flex item) of the container is set to flex-grow: 0 , which is the default setting. So the h3 text has a limited range of motion.

Try this instead:

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

Answer 2

If you want something to align itself to the bottom center of a container, the route I usually take is to set the parent as display: flex; and the children as align-self: flex-end;

If you want to maintain the same structure of your HTML, the best route would be to set the height of your link container to be a percentage of the parent, align the <h3> to the bottom of its container, and center it.

.service-square .flex-link {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  height: 80%;
}

.service-square h3 {
  align-self: flex-end;
  margin-bottom: 0;
}

Hopefully I understood your question correctly, let me know if you have any questions or I misunderstood the initial request.

 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; } /* ===== New content ===== */ .service-square .flex-link { display: flex; flex-wrap: wrap; justify-content: center; height: 80%; } .service-square h3 { align-self: flex-end; margin-bottom: 0; } 

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