Taste nicht an der Unterseite der Flexbox-Säule

Question

verankern Ich habe eine dreispaltige Flexbox. Innerhalb jeder Spalte möchte ich eine Schaltfläche, um sich in der unteren linken Ecke der Spalte zu verankern. Nach viel Recherche und Versuch und Irrtum kann ich das scheinbar nicht erreichen - der Button bewegt sich bei verschiedenen Bildschirmbreiten immer nach oben oder unten. Ich habe versucht, den Knopf innerhalb des Textabschnitts einzuschließen und den Knopf in seinem eigenen div innerhalb der Spalte auch einzustellen. Es ist wichtig, dass die Spalten auf allen Bildschirmbreiten gleich hoch bleiben, was mit dem unten stehenden CSS erreicht wurde. Kann jemand mit diesem Problem helfen?

.flexbox { 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.flexbox .col { 
 
    flex: 1; 
 
    margin: 10px; 
 
} 
 

 
.flexbox_colbutton { 
 
    flex: 1; 
 
background: #fff; 
 
align-items: flex-end; 
 
    display: flex; 
 
justify-content: left; 
 
} 
 

 
.flexbox .col:nth-child(1) { 
 
    background: #fff; 
 
    -webkit-order: 0; 
 
    -ms-flex-order: 0; 
 
    order: 0; 
 
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); 
 
} 
 
.flexbox .col:nth-child(2) { 
 
    background: #fff; 
 
    -webkit-order: 1; 
 
    -ms-flex-order: 1; 
 
    order: 1; 
 
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); 
 
} 
 
.flexbox .col:nth-child(3) { 
 
    background: #fff; 
 
    -webkit-order: 2; 
 
    -ms-flex-order: 2; 
 
    order: 2; 
 
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); 
 
} 
 
.flexbox .col:nth-child(4) { 
 
    background: #fff; 
 
    -webkit-order: 3; 
 
    -ms-flex-order: 3; 
 
    order: 3; 
 
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); 
 
} 
 

 

 
@media (max-width: 480px) { 
 
    .flexbox col { 
 
     max-width: 98%; 
 
    } 
 
\t 
 
\t .flexbox { 
 
    flex-direction: column; 
 
    }

<div class="flexbox"> 
 
    <div class="col"> 
 
    <br> 
 
      <h5><center><strong>recent testimonial</strong></center></h5> 
 
     <p class="text-justify w3-padding">..DREW performed very well from the outset. When we had to value-engineer the project to bring it within budget they were extremely helpful with advice and assistance. The Site Manager was courteous and informative, and throughout performance levels were excellent."<br><br> 
 
     <i>Mark Holloway, Countryside Operations Manager, Bournemouth Borough Council<br> 
 
     [Hengistbury Head Visitor Centre]</i></p> 
 
     <br><br> 
 
     <div class="flexbox_colbutton"> 
 
     <button class="w3-btn w3-red w3-medium" href="#">view project</button> 
 
     </div> 
 
     </div> 
 
     
 
    
 
    
 
     <div class="col"> 
 
      <br> 
 
      <h5><center><strong>WHY OUR CLIENTS CHOOSE DREW</strong></center></h5> 
 
      <p class="text-justify text-left w3-padding"> 
 
      &#10004; our clients are our first priority <br>&#10004; triple badge ISO accreditation <br>&#10004; highly experienced Director-led project teams<br> 
 
     &#10004; collaborative working approach to project delivery<br> 
 
     &#10004; extensive in-house technical expertise <br>&#10004; financially stable and long-established Company <br> 
 
     &#10004; excellent record on health, safety and the environment</p><br> 
 
     <br> 
 
     <div class="flexbox_colbutton"> 
 
     <button class="w3-btn w3-red w3-medium" href="#">read more</button> 
 
     </div> 
 
     </div> 
 
     
 
    
 
    <div class="col"> 
 
    
 
    <br> 
 
      
 
      <h5><center><strong>recent testimonial</strong></center></h5> 
 
     <p class="text-justify w3-padding">"..The scheme was delivered to budget and, although a challenging design, is of the highest quality. During construction DREW worked to ensure it responded with practical solutions to some challenging requirements .. I would certainly recommend them for future projects."<br><br> 
 
     <i>David Morris, Sweett (UK)<br>[St George's Primary School]</i></p><br> 
 
     <br><br> 
 
    <div class="flexbox_colbutton"> 
 
     <button class="w3-btn w3-red w3-medium" href="#">view project</button> 
 
     </div> 
 
     </div> 
 
     </div>

Answer 1

würde ich vorschlagen, Flexbox für die Spalten zu verwenden, auch:

.flexbox .col { 
    display: flex; 
    flex-direction: column; 
} 

Jetzt können wir die <p> Tags machen nehmen alle den verbleibenden Platz, effektiv Knopfdruck bis zum Ende der Spalten.

.col p { 
    flex: 1; 
} 

Hinweis: Wenn Sie andere Inhalte als direktes Kind von .col (wie ein <ul>) hinzuzufügen, haben Sie flex: 1 dafür zu setzen, auch. Die Schaltfläche muss nicht ein Flex-Grow-Set haben, also entfernen Sie die Zeile flex: 1; von .flexbox_colbutton.

Sie können das ganze, bearbeitete Beispiel unten finden. In meinen Tests war der Button immer am unteren Rand und die Seite verhielt sich so, wie ich es sollte.

.flexbox { 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    flex-wrap: wrap;  
 
} 
 
    
 
    
 
.flexbox .col { 
 
    flex: 1; 
 
    margin: 10px; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.col p { 
 
    flex: 1; 
 
} 
 

 
.flexbox_colbutton { 
 
    background: #fff; 
 
    display: flex; 
 
} 
 

 
.flexbox .col:nth-child(1) { 
 
    background: #fff; 
 
    -webkit-order: 0; 
 
    -ms-flex-order: 0; 
 
    order: 0; 
 
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); 
 
} 
 
.flexbox .col:nth-child(2) { 
 
    background: #fff; 
 
    -webkit-order: 1; 
 
    -ms-flex-order: 1; 
 
    order: 1; 
 
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); 
 
} 
 
.flexbox .col:nth-child(3) { 
 
    background: #fff; 
 
    -webkit-order: 2; 
 
    -ms-flex-order: 2; 
 
    order: 2; 
 
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); 
 
} 
 

 
.flexbox .col:nth-child(4) { 
 
    background: #fff; 
 
    -webkit-order: 3; 
 
    -ms-flex-order: 3; 
 
    order: 3; 
 
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); 
 
} 
 

 

 
@media (max-width: 480px) { 
 
    .flexbox col { 
 
     max-width: 98%; 
 
    } 
 
\t 
 
\t .flexbox { 
 
    flex-direction: column; 
 
    }

<div class="flexbox"> 
 
    <div class="col"> 
 
    <br> 
 
      <h5><center><strong>recent testimonial</strong></center></h5> 
 
     <p class="text-justify w3-padding">..DREW performed very well from the outset. When we had to value-engineer the project to bring it within budget they were extremely helpful with advice and assistance. The Site Manager was courteous and informative, and throughout performance levels were excellent."<br><br> 
 
     <i>Mark Holloway, Countryside Operations Manager, Bournemouth Borough Council<br> 
 
     [Hengistbury Head Visitor Centre]</i></p> 
 
     <br><br> 
 
     <div class="flexbox_colbutton"> 
 
     <button class="w3-btn w3-red w3-medium" href="#">view project</button> 
 
     </div> 
 
     </div> 
 
     
 
    
 
    
 
     <div class="col"> 
 
      <br> 
 
      <h5><center><strong>WHY OUR CLIENTS CHOOSE DREW</strong></center></h5> 
 
      <p class="text-justify text-left w3-padding"> 
 
      &#10004; our clients are our first priority <br>&#10004; triple badge ISO accreditation <br>&#10004; highly experienced Director-led project teams<br> 
 
     &#10004; collaborative working approach to project delivery<br> 
 
     &#10004; extensive in-house technical expertise <br>&#10004; financially stable and long-established Company <br> 
 
     &#10004; excellent record on health, safety and the environment</p><br> 
 
     <br> 
 
     <div class="flexbox_colbutton"> 
 
     <button class="w3-btn w3-red w3-medium" href="#">read more</button> 
 
     </div> 
 
     </div> 
 
     
 
    
 
    <div class="col"> 
 
    
 
    <br> 
 
      
 
      <h5><center><strong>recent testimonial</strong></center></h5> 
 
     <p class="text-justify w3-padding">"..The scheme was delivered to budget and, although a challenging design, is of the highest quality. During construction DREW worked to ensure it responded with practical solutions to some challenging requirements .. I would certainly recommend them for future projects."<br><br> 
 
     <i>David Morris, Sweett (UK)<br>[St George's Primary School]</i></p><br> 
 
     <br><br> 
 
    <div class="flexbox_colbutton"> 
 
     <button class="w3-btn w3-red w3-medium" href="#">view project</button> 
 
     </div> 
 
     </div> 
 
     </div>