How to align element to bottom using Flexbox?

I am using flex based layout in my HTML / CSS based layout, now I want to align a button at bottom of flexbox based div. Parent div of button has flex based CSS property.

Consider below image, I want to push "Select" button at bottom of main div, so how can I do it?


Here is the HTML

                    <section class="item">
                       <!--some html-->
                        <div class="fearures"></div>
                        <div class="priceSelectbtnDiv">
                            <input type="button" value="Select " class="btn btn-primary">

and current CSS of parent div

 .item {
    flex: 1 0 180px;
    display: flex;
    flex-flow: column;
    padding: 15px 12px;
    border-radius: 5px;
    border: 1px solid #00C5A3;

Asked by:- bhanu
: 206 At:- 7/10/2021 12:47:01 PM
HTML CSS flexbox align button at end of flex div CSS

1 Answers
profileImage Answered by:- vikas_jk

Easiest solution for aligning an item to the bottom of div using Flex is using "auto-margins", so considering your HTML and CSS, your CSS should be as below

.features { margin-bottom: auto; } /* Push following elements to the bottom */
.priceSelectbtnDiv { margin-top: auto; } /* Push it and following elements to the bottom */

This works considering any positive free space is distributed to auto margins.

Here is the complete fiddle link


Simply follow these steps

  • Style parent element with: style="display:flex; flex-direction:column; flex:1;"
  • Style the element you want to stay at bottom with: style="margin-top: auto;"
  • that's it you are done.


Hope it helps, thanks.

At:- 7/10/2021 1:06:17 PM
Thanks for quick and easy solution, margin-top:auto, works. 0
By : bhanu - at :- 7/10/2021 1:07:38 PM

Login/Register to answer
Register directly by posting answer/details

Full Name *

Email *

By posting your answer you agree on privacy policy & terms of use