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?

align-item-to-bottom-flexbox-css-min.png

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">
                        </div>
                    </section>

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
0
: 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 https://jsfiddle.net/71pcd3bz/

OR

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.

Fiddle: https://jsfiddle.net/dktL4bun/

Hope it helps, thanks.

1
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
Or
Register directly by posting answer/details

Full Name *

Email *




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