Align an element to bottom with flexbox

Question

I have a div with some children    lt div class  content  gt     lt h1 gt heading 1 lt  h1 gt     lt h2 gt heading 2 lt  h2 gt     lt p gt Some more or less text lt  p gt     lt a href     class  button  gt Click me lt  a gt   lt  div gt    and I want the following layout    -------------------  heading 1             heading 2              paragraph text        can have many         rows                                                                                     link-button           -------------------   Regardless how much text is in the p I want to stick the  button always at the bottom without taking it out of the flow  I ve heard this can be achievable with Flexbox but I can t get it to work

User · Answer

When setting your display to flex  you could simply use the flex property to mark which content can grow and which content cannot   Flex property   x000D   x000D  div content   x000D   height  300px  x000D   display  flex  x000D   flex-direction  column  x000D    x000D   x000D  div up   x000D    flex  1  x000D    x000D   x000D  div down   x000D    flex  none  x000D    x000D   lt div class  content  gt  x000D     lt div class  up  gt  x000D       lt h1 gt heading 1 lt  h1 gt  x000D       lt h2 gt heading 2 lt  h2 gt  x000D       lt p gt Some more or less text lt  p gt  x000D     lt  div gt  x000D   x000D     lt div class  down  gt  x000D       lt a href     class  button  gt Click me lt  a gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I just found a solution for this   for those who are not satisfied with the given answers can try this approach with flexbox  CSS       myFlexContainer           display  flex          width  100               myFlexChild           width  100           display  flex                          set this property if this is set to column by other css class              that is used by your target element                      flex-direction  row                          necessary for our goal                      flex-wrap  wrap          height  500px                the element you want to put at the bottom         myTargetElement                         will not work unless flex-wrap is set to wrap and             flex-direction is set to row                     align-self  flex-end          HTML       lt div class  myFlexContainer  gt           lt div class  myFlexChild  gt               lt p gt this is just sample lt  p gt               lt a class  myTargetElement  href     gt set this to bottom lt  a gt           lt  div gt       lt  div gt

User · Answer

You can use auto margins     Prior to alignment via justify-content and align-self    any positive free space is distributed to auto margins in that   dimension    So you can use one of these  or both    p   margin-bottom  auto       Push following elements to the bottom    a   margin-top  auto       Push it and following elements to the bottom       x000D   x000D   content   x000D    height  200px  x000D    border  1px solid  x000D    display  flex  x000D    flex-direction  column  x000D    x000D  h1  h2   x000D    margin  0  x000D    x000D  a   x000D    margin-top  auto  x000D    x000D   lt div class  content  gt  x000D     lt h1 gt heading 1 lt  h1 gt  x000D     lt h2 gt heading 2 lt  h2 gt  x000D     lt p gt Some text more or less lt  p gt  x000D     lt a href     class  button  gt Click me lt  a gt  x000D   lt  div gt  x000D   x000D   x000D    Alternatively  you can make the element before the a grow to fill the available space   p   flex-grow  1       Grow to fill available space       x000D   x000D   content   x000D    height  200px  x000D    border  1px solid  x000D    display  flex  x000D    flex-direction  column  x000D    x000D  h1  h2   x000D    margin  0  x000D    x000D  p   x000D    flex-grow  1  x000D    x000D   lt div class  content  gt  x000D     lt h1 gt heading 1 lt  h1 gt  x000D     lt h2 gt heading 2 lt  h2 gt  x000D     lt p gt Some text more or less lt  p gt  x000D     lt a href     class  button  gt Click me lt  a gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

The solution with align-self  flex-end  didn t work for me but this one did in case you want to use flex   Result   -------------------  heading 1             heading 2              paragraph text                                                                           link button           -------------------   Code  Note  When  running the code snippet  you have to scroll down to see the link at the bottom    x000D   x000D   content   x000D    display  flex  x000D    justify-content  space-between  x000D    flex-direction  column  x000D    height  300px  x000D    x000D   x000D   content  upper   x000D    justify-content  normal  x000D    x000D   x000D     Just to show container boundaries    x000D   content  upper   content  bottom   content  upper  gt      x000D    border  1px solid  ccc  x000D    x000D   lt div class  content  gt  x000D     lt div class  upper  gt  x000D      lt h1 gt heading 1 lt  h1 gt  x000D      lt h2 gt heading 2 lt  h2 gt  x000D      lt p gt paragraph text lt  p gt  x000D     lt  div gt  x000D   x000D     lt div class  bottom  gt  x000D      lt a href     class  button  gt link button lt  a gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Try This   x000D   x000D   content   x000D        display  flex  x000D        flex-direction  column  x000D        height  250px  x000D        width  200px  x000D        border  solid  x000D        word-wrap  break-word  x000D        x000D   x000D      content h1    content h2   x000D       margin-bottom  0px  x000D        x000D   x000D      content p   x000D       flex  1  x000D        x000D      lt div class  content  gt  x000D     lt h1 gt heading 1 lt  h1 gt  x000D     lt h2 gt heading 2 lt  h2 gt  x000D     lt p gt Some more or less text lt  p gt  x000D     lt a href     class  button  gt Click me lt  a gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Not sure about flexbox but you can do using the position property   set parent div position  relative and child element which might be an  lt p gt  or  lt h1 gt  etc   set position  absolute and bottom  0   Example   index html   lt div class  parent  gt     lt p gt Child lt  p gt   lt  div gt    style css   parent     background  gray    width  10     height  100px        position  relative    p     position  absolute    bottom  0      Code pen here

User · Answer

1  Style parent element  style  quot display flex  flex-direction column  flex 1  quot  2  Style the element you want to stay at bottom  style  quot margin-top  auto  quot  3  Done  Wow  That was easy  Example    lt section style  quot display flex  flex-wrap wrap  quot  gt     For demo  not necessary      lt div style  quot display flex  flex-direction column  flex 1  quot  gt     Parent element          lt button style  quot margin-top  auto  quot  gt  I  lt  button gt     Target element      lt  div gt           5 more identical divs  for demo       lt  section gt   Demo  https   codepen io ferittuncer pen YzygpWX

User · Answer

You can use display  flex to position an element to the bottom  but I do not think you want to use flex in this case  as it will affect all of your elements    To position an element to the bottom using flex try this    container     display  flex      button     align-self  flex-end      Your best bet is to set position  absolute to the button and set it to bottom  0  or you can place the button outside the container and use negative transform  translateY -100   to bring it in the container like this    content       height  400px      background   000      color   fff     button       transform  translateY -100        display  inline-block      Check this JSFiddle

[html] Align an element to bottom with flexbox

Examples related to html

Examples related to css

Examples related to flexbox