ボタンがフレックスボックスカラムの底に固定されていません

Question

私は3列フレックスボックスを持っています。各列内では、ボタンを列の左下の隅に固定する必要があります。多くの研究と試行錯誤の後、私はこれを達成できないように見えます。画面の幅を変えて見ると、ボタンは常に列の上または下に移動します。私は、テキストセクション内のボタンを含めることを試みたし、また、列内の自分のdivのボタンを設定します。下のCSSで達成されているすべての画面幅で、列が同じ高さのままであることが重要です。誰もこの問題を助けることができますか？

.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

私も、列に対してフレキシボックスを使用することをお勧めしたい：

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

今、私たちは<p>タグが効果的にボタンを押して、残りのすべてのスペースを取ることができます列の下部に移動します。

.col p { 
    flex: 1; 
} 

注：あなたが.col（<ul>のような）の直接の子として他のコンテンツを追加する場合は、あまりにも、それについてflex: 1を設定する必要があります。ボタンはでなければにはフレックス増加セットがありますので、flex: 1;を.flexbox_colbuttonから削除してください。

下記のサンプル全体を見つけることができます。私のテストでは、ボタンは常に下端にあり、ページは思ったように動作しました。

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