4

I am using flexbox to create part of a page and I have 2 buttons that will open modals in one of the flexbox items. I would like to fix the buttons to the bottom of the item like a footer if possible.

I have created a CodePen to demo the issue. I have tried several solutions but I can't seem to get the buttons aligned at the bottom. I am relatively new to HTML and CSS so it's very possible that I've missed something trivial. 

#container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  align-content: center;
  margin-top: 20px;
}

.one {
  background-color: black;
  color: white;
  font-size: 30px;
  padding: 10px;
  width: 450px;
  flex-grow: 1;
  height: 600px;
}

.two {
  background-color: grey;
  color: white;
  font-size: 30px;
  padding: 10px;
  flex-grow: 1.2;
  width: 524px;
  height: 600px;
}

button {
  background-color: green;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}
<div id="container">
  <div class="one">
    <p> I would like to align the buttons to the bottom of this item </p>
    <button id="Btn1">Open Modal 1</button>
    <button id="Btn2">Open Modal 2</button>
  </div>
  <div class="two">
    <p> No buttons for this item </p>
  </div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
MJH
  • 398
  • 2
  • 14

3 Answers3

2

You can make .one display: flex; flex-direction: column;, wrap the buttons in an element, and use justify-content: space-between on .one to push the buttons to the bottom of the column.

#container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; 
  justify-content: space-around;
  align-items: center;
  align-content: center;
  margin-top: 20px;
}

.one{
  background-color: black;
  color: white;
  font-size: 30px;
  padding: 10px; 
  width: 450px;
  flex-grow: 1; 
  height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}


.two{
  background-color: grey;
  color: white;
  font-size: 30px;
  padding: 10px; 
  flex-grow: 1.2;
  width: 524px;
  height: 600px;
}

button {
    background-color: green; 
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
<div id="container">
      <div class="one">
        <p> I would like to align the buttons to the bottom of this item </p>
        <div class="buttons">
        <button id="Btn1">Open Modal 1</button>
        <button id="Btn2">Open Modal 2</button>
        </div>
      </div>
      <div class="two">
        <p> No buttons for this item </p>
     </div>
Michael Coker
  • 52,626
  • 5
  • 64
  • 64
1

Since flex properties only apply to the children of a flex container, your buttons are not flex items.

The buttons are descendants of the flex container (#container), but not children, so they are beyond the scope of flex layout.

One method to resolve the issue would be to make the parent of the buttons a flex container. Then flex properties can be applied to the buttons.

#container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  align-content: center;
  margin-top: 20px;
}

.one {
  background-color: black;
  color: white;
  font-size: 30px;
  padding: 10px;
  width: 450px;
  flex-grow: 1;
  height: 600px;
  display: flex;           /* new */
  flex-wrap: wrap;         /* new */
}

p {
  flex: 0 0 100%;          /* new */
}

button {
  margin: auto 10px 0;     /* new */
  background-color: green;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

.two {
  background-color: grey;
  color: white;
  font-size: 30px;
  padding: 10px;
  flex-grow: 1.2;
  width: 524px;
  height: 600px;
}
<div id="container">
  <div class="one">
    <p> I would like to align the buttons to the bottom of this item </p>
    <button id="Btn1">Open Modal 1</button>
    <button id="Btn2">Open Modal 2</button>
  </div>
  <div class="two">
    <p> No buttons for this item </p>
  </div>

Learn more about the flex formatting context here:

Learn more about flex auto margins here:

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • thank you for the helpful answer and explanation. Quick question, why have you added the `flex` to p in the CSS? What is this doing? – MJH Jun 15 '17 at 16:25
  • That makes the `p` element consume the entire width of the row, forcing the buttons to the next line. That's why `flex-wrap` is needed on the container. – Michael Benjamin Jun 15 '17 at 16:27
  • I tried to do it without changing the HTML (often people want no changes to the mark-up). But yes, if you can adjust the mark-up, then [that option](https://stackoverflow.com/a/44572522/3597276) is a better solution. – Michael Benjamin Jun 15 '17 at 16:36
0

One approach would be to put your buttons in their own <div> like so:

<div id="container">
  <div class="one">
    <p> I would like to align the buttons to the bottom of this item </p>
      <div class="btn-container">
        <button id="Btn1">Open Modal 1</button>
        <button id="Btn2">Open Modal 2</button>
      </div>
    </div>
  <div class="two">
<p> No buttons for this item </p>
</div>

and change your css to:

#container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; 
  justify-content: space-around;
  align-items: center;
  align-content: center;
  margin-top: 20px;
}

.one {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  height: 100vh;
  background-color: black;
  color: white;
  font-size: 30px;
  padding: 10px; 
  width: 450px;
  height: 600px;  
}

.two {
  background-color: grey;
  color: white;
  font-size: 30px;
  padding: 10px; 
  flex-grow: 1.2;
  width: 524px;
  height: 600px;
}

 .btn-container {
    justify-content: flex-end;
    display: flex;
  }

button {
    margin: 10px;
    background-color: green; 
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
Belder
  • 768
  • 1
  • 10
  • 17