How to set the buttons for all cards at the bottom?-CodePudding

how do I align all buttons at the bottom of the card? The body of the card is already on display:flex and flex-direction: column, while the card buttons' margin-top are already set at 'auto' however the it's still not being positioned at the bottom?

I attached below the code structure for my cards including the styling for the card content and the buttons.

[![enter image description here](https://i.stack.imgur.com/eJLHT.png)](https://i.stack.imgur.com/eJLHT.png)

<section >
            <div >
                <div ></div>
                <div >
                    <h2 >Bayanihan E-Konsulta</h2>
                    <p >The Bayanihan e-Konsulta – a teleconsultation program aimed at assisting both COVID-19 and non-COVID-19 patients which was initially launched to fill the gaps in the government’s pandemic response.</p>
                    <button >Read more<span>&rarr;</span></button>
                </div>
            </div>

            <div >
                <div ></div>
                <div >
                    <h2 >Swab Cab</h2>
                    <p >A mobile testing program which will do mass surveillance testing in communities where transmission is very high.</p>
                    <button >Read more<span>&rarr;</span></button>
                </div>
           </div>

           <div >
            <div ></div>
                <div >
                    <h2 >Free PPEs for HCWs</h2>
                    <p >Vice President Leni Robredo’s office continues its livelihood assistance projects as it turned over materials to a group of Bulacan sewers, who were tapped to make personal protective equipment (PPEs) who were tapped to make personal protective equipment (PPEs). </p>
                    <button >Read more<span>&rarr;</span></button>
                </div>
            </div>

            <a href="#title" >BACK TO TOP</a>

        </section>

The body of the card is already on display:flex and flex-direction: column, while the card buttons' margin-top are already set at 'auto'. I can fix this by manually adjusting the button's margin but I think it's possible to adjust all buttons simultaneously.

CodePudding user response：

I prepared a example in codepen: https://codepen.io/isaksonn/pen/eYKzarW

section.container .card{display:flex;flex-direction:column;justify-content:space-between;height:600px;width:200px;border:1px solid gray;padding:10px}section.container .card .card-img{display:block;background-color:gray;width:100%;height:200px}section.container .card .card-content{height:100%;display:flex;flex-direction:column;justify-content:space-between}

<section >
  <div >
    <div ></div>
    <div >
<!--If you want align the title and text on the top and only the buttons down you have to wrap the firsts in a div, otherwise the text is centered vertically (as second card)-->
      <div >
          <h2 >Bayanihan E-Konsulta</h2>
          <p >The Bayanihan e-Konsulta – a teleconsultation program aimed at assisting both COVID-19 and non-COVID-19 patients which was initially launched to fill the gaps in the government’s pandemic response.</p>
        </div>
      <button >Read more<span>&rarr;</span></button>
    </div>
  </div>

  <div >
    <div ></div>
    <div >
      <h2 >Swab Cab</h2>
      <p >A mobile testing program which will do mass surveillance testing in communities where transmission is very high.</p>
      <button >Read more<span>&rarr;</span></button>
    </div>
  </div>

 

  <a href="#title" >BACK TO TOP</a>

</section>

CodePudding user response：

You can try this..

add button element in 'p' and you can add class in 'p' element and than go to css file and style