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

: 6231 At:- 7/10/2021 12:47:01 PM

HTML CSS flexbox align button at end of flex div CSS

add comment to question

3 Answers

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/

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/

Use flex-direction :column

.content {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  height: 300px;
}

.content .upper {
  justify-content: normal;
}

sample fiddle: https://jsfiddle.net/0zc4vLsk/

Hope it helps, thanks.

At:- 7/10/2021 1:06:17 PM Updated at:- 10/19/2022 7:52:27 AM

Thanks for quick and easy solution, margin-top:auto, works. 0

By : bhanu - at :- 7/10/2021 1:07:38 PM

comment to above answer

Answered by:- bhanu

I would like to add one more option to set "flex: none;" to the div you want to place in end and "flex:1" to the content you want to keep up inside "flex-direction: column;" div

HTML

<div class="content">
  <div class="top">
   <p>Some more or less text</p>
    <p>Some more or less text</p>
  </div>

  <div class="bottom">
    <a href="/" class="button">Bottom anchor</a>
  </div>
</div>

CSS

.content {
 height: 300px;
 display: flex;
 flex-direction: column;
}

.top {
  flex: 1;
}

.bottom {
  flex: none;
}

You can check sample fiddle here.

At:- 2/23/2022 4:14:49 PM

comment to above answer

Answered by:- jaiprakash

Try flex-grow: 1; for the second last element, so last element is aligned at bottom automatically.

Here is sample Code

.content {
  height: 200px;
  border: 1px solid;
  display: flex;
  flex-direction: column;
}
.top{
  flex-grow: 1;
}

With HTML

<div class="content">
  <div class="top">
   <p>Some more or less text</p>
    <p>Some more or less text</p>
  </div>

  <div class="bottom">
    <a href="/" class="button">Bottom anchor</a>
  </div>
</div>

Fiddle: https://jsfiddle.net/yv85Lj2f/

Hope it helps.

At:- 11/15/2022 3:06:11 PM