Выровнять ссылки в нижней части нескольких divs

Question

Я использую макет адаптивной гибкой сетки с каждым «ящиком», содержащим текст и кнопку; при этом все коробки имеют одинаковый рост. Я пытаюсь получить кнопки для выравнивания в нижней части окна (с учетом полей и отступов) и друг с другом.

 
---------- ---------- ---------- 
| text | | text | | text | 
|  | | text | | text | 
|  | |  | | text | 
|  | |  | |  | 
| button | | button | | button | buttons aligned with each other at bottom of box 
---------- ---------- ---------- 

.container { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    max-width: 100%; 
 
    width: 1170px; 
 
} 
 

 
.row { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
} 
 

 
.col { 
 
    flex: 1 1 8%; 
 
    margin: 0; 
 
    padding: 0 0 0 1em; 
 
    box-sizing: border-box; 
 
} 
 

 
.col:first-child { padding-left: 0; } 
 
.col:last-child { padding-right: 0; } 
 

 
.col-span-1 { 
 
    flex-basis: 8.3333%; 
 
} 
 

 
article { 
 
    height:100%; 
 
    border:1px solid black; 
 
    padding:1em; 
 
} 
 

 
a.quickbutton { 
 
    color: #afafaf; 
 
    background-color: #fafafa; 
 
    background-image: none; 
 
    border: 0 none; 
 
    border-radius: 4px; 
 
    cursor: pointer; 
 
    display: block; 
 
    font-size: larger; 
 
    font-weight: 500; 
 
    margin-bottom: 4px; 
 
    padding: 1.5em; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    white-space: normal; 
 
    max-width: 100%; 
 
    text-decoration:none; 
 
} 
 

 
a.quickbutton:hover { 
 
    background-color: #afafaf; 
 
    color: #fafafa; 
 
    text-decoration: none; 
 
} 
 

 
.bottom { 
 
    
 
    /*--------------------------------*/ 
 
    /* THIS IS WHERE I NEED SOMETHING */ 
 
    /*--------------------------------*/ 
 
    
 
    /* vertical-align: bottom; doesn't work */ 
 
    
 
    /* position:relative: bottom:0px; doesn't work */ 
 
} 
 

 

 
@media only screen and (max-width: 48em) { 
 
    .col-span-1 
 
    { 
 
    flex-basis: 100%; 
 
    padding:0; 
 
    } 
 
}

<div class="container"> 
 

 
    <div class="row"> 
 
    
 
     <div class="col col-span-1"> 
 
      <article> 
 
       <h2>Article 1</h2> 
 
       <p>Lorem ipsum dolor sit amet, at albucius nominavi mei. Dicant decore voluptatibus pro ei, eum aliquid eruditi mnesarchum id. Eam ad summo verterem vituperatoribus. Suscipit prodesset delicatissimi nam ei.</p> 
 
       <a href="#" class="quickbutton bottom">Button 1</a> 
 
      </article> 
 
     </div><!-- col --> 
 
     
 
    \t <div class="col col-span-1"> 
 
      <article> 
 
       <h2>Article 2</h2> 
 
       <p>Lorem ipsum dolor sit amet, at albucius nominavi mei. Dicant decore voluptatibus pro ei, eum aliquid eruditi mnesarchum id. Eam ad summo verterem vituperatoribus. Suscipit prodesset delicatissimi nam ei.</p> 
 
       <p>Commodo alienum ne cum, recteque torquatos an eum. Ad mandamus sententiae intellegebat mei, cum ut nostrum propriae gubergren. Vocent albucius intellegebat vix ex. Cetero vocent aperiam sit ad. Meis tritani vel ex, ne qui admodum repudiandae, civibus lucilius perfecto in qui. Nam eu debet soleat facete. Pro an quod meis tollit, eu nam interesset appellantur, te partiendo erroribus interpretaris eos.</p> 
 
       <a href="#" class="quickbutton bottom">Button 2</a> 
 
      </article> 
 
     </div><!-- col --> 
 
     
 
    \t <div class="col col-span-1"> 
 
      <article> 
 
       <h2>Article 3</h2> 
 
       <p>Lorem ipsum dolor sit amet, at albucius nominavi mei. Dicant decore voluptatibus pro ei, eum aliquid eruditi mnesarchum id. Eam ad summo verterem vituperatoribus. Suscipit prodesset delicatissimi nam ei.</p> 
 
       <p>Commodo alienum ne cum, recteque torquatos an eum. Ad mandamus sententiae intellegebat mei, cum ut nostrum propriae gubergren. Vocent albucius intellegebat vix ex. Cetero vocent aperiam sit ad. Meis tritani vel ex, ne qui admodum repudiandae, civibus lucilius perfecto in qui. Nam eu debet soleat facete. Pro an quod meis tollit, eu nam interesset appellantur, te partiendo erroribus interpretaris eos.</p> 
 
       <p>Ei has movet liberavisse. Sed errem ridens singulis te, mea liber homero doctus te, ne oratio aliquip antiopam vis. In graecis incorrupte accommodare nam. No pri malorum euismod dissentiet, vix ut ludus sententiae intellegebat. Esse labitur voluptatibus sed no, posidonium temporibus an nec.</p> 
 
       <a href="#" class="quickbutton bottom">Button 3</a> 
 
      </article> 
 
    \t </div><!-- col --> 
 
     
 
    </div><!-- row --> 
 

 
</div><!-- container -->

Конечно, если смотреть на мобильном устройстве или маленьком экране коробки должны «Распад» их минимально необходимого размера.

Я бы очень признателен за помощь в достижении этого, поскольку он сходит с ума! Если есть какие-то другие улучшения, я хочу узнать больше.

ТИА

Answer 1

Смотрите решение в фрагменте коды ниже

.container { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    max-width: 100%; 
 
    width: 1170px; 
 
} 
 

 
.row { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
} 
 

 
.col { 
 
    flex: 1 1 8%; 
 
    margin: 0; 
 
    padding: 0 0 0 1em; 
 
    box-sizing: border-box; 
 
} 
 

 
.col:first-child { padding-left: 0; } 
 
.col:last-child { padding-right: 0; } 
 

 
.col-span-1 { 
 
    flex-basis: 8.3333%; 
 
} 
 

 
article { 
 
    height: calc(100% - 100px - 2em); 
 
    border:1px solid black; 
 
    padding: 1em 1em calc(1em + 100px) 1em; 
 
    position: relative; 
 
} 
 

 
a.quickbutton { 
 
    color: #afafaf; 
 
    background-color: #fafafa; 
 
    background-image: none; 
 
    border: 0 none; 
 
    border-radius: 4px; 
 
    cursor: pointer; 
 
    display: block; 
 
    font-size: larger; 
 
    font-weight: 500; 
 
    margin-bottom: 4px; 
 
    padding: 1.5em; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    white-space: normal; 
 
    max-width: 100%; 
 
    text-decoration:none; 
 
} 
 

 
a.quickbutton:hover { 
 
    background-color: #afafaf; 
 
    color: #fafafa; 
 
    text-decoration: none; 
 
} 
 

 
.bottom { 
 
    position:absolute; 
 
    bottom:1em; 
 
    height: 100px; 
 
    width: calc(100% - 2em); 
 
} 
 

 

 
@media only screen and (max-width: 48em) { 
 
    .col-span-1 
 
    { 
 
     flex-basis: 100%; 
 
     padding:0; 
 
    } 
 
}

<html> 
 
    <head> 
 
     <link rel="stylesheet" href="./styles.css"> 
 
    </head> 
 
    <body> 
 

 
    <div class="container"> 
 

 
     <div class="row"> 
 

 
      <div class="col col-span-1"> 
 
       <article> 
 
        <h2>Article 1</h2> 
 
        <p>Lorem ipsum dolor sit amet, at albucius nominavi mei. Dicant decore voluptatibus pro ei, eum aliquid eruditi mnesarchum id. Eam ad summo verterem vituperatoribus. Suscipit prodesset delicatissimi nam ei.</p> 
 
        <div class="bottom"><a href="#" class="quickbutton">Button 1</a></div> 
 
       </article> 
 
      </div><!-- col --> 
 

 
      <div class="col col-span-1"> 
 
       <article> 
 
        <h2>Article 2</h2> 
 
        <p>Lorem ipsum dolor sit amet, at albucius nominavi mei. Dicant decore voluptatibus pro ei, eum aliquid eruditi mnesarchum id. Eam ad summo verterem vituperatoribus. Suscipit prodesset delicatissimi nam ei.</p> 
 
        <p>Commodo alienum ne cum, recteque torquatos an eum. Ad mandamus sententiae intellegebat mei, cum ut nostrum propriae gubergren. Vocent albucius intellegebat vix ex. Cetero vocent aperiam sit ad. Meis tritani vel ex, ne qui admodum repudiandae, civibus lucilius perfecto in qui. Nam eu debet soleat facete. Pro an quod meis tollit, eu nam interesset appellantur, te partiendo erroribus interpretaris eos.</p> 
 
        <div class="bottom"><a href="#" class="quickbutton">Button 2</a></div> 
 
       </article> 
 
      </div><!-- col --> 
 

 
      <div class="col col-span-1"> 
 
       <article> 
 
        <h2>Article 3</h2> 
 
        <p>Lorem ipsum dolor sit amet, at albucius nominavi mei. Dicant decore voluptatibus pro ei, eum aliquid eruditi mnesarchum id. Eam ad summo verterem vituperatoribus. Suscipit prodesset delicatissimi nam ei.</p> 
 
        <p>Commodo alienum ne cum, recteque torquatos an eum. Ad mandamus sententiae intellegebat mei, cum ut nostrum propriae gubergren. Vocent albucius intellegebat vix ex. Cetero vocent aperiam sit ad. Meis tritani vel ex, ne qui admodum repudiandae, civibus lucilius perfecto in qui. Nam eu debet soleat facete. Pro an quod meis tollit, eu nam interesset appellantur, te partiendo erroribus interpretaris eos.</p> 
 
        <p>Ei has movet liberavisse. Sed errem ridens singulis te, mea liber homero doctus te, ne oratio aliquip antiopam vis. In graecis incorrupte accommodare nam. No pri malorum euismod dissentiet, vix ut ludus sententiae intellegebat. Esse labitur voluptatibus sed no, posidonium temporibus an nec.</p> 
 
        <div class="bottom"><a href="#" class="quickbutton">Button 3</a></div> 
 
       </article> 
 
      </div><!-- col --> 
 

 
     </div><!-- row --> 
 

 
    </div><!-- container --> 
 

 
    </body> 
 
</html>