Flex on parent div affecting flex of child buttons

I have two buttons that I want side by side with a little space between them:

Flex on parent div affecting flex of child buttons

I originally did this by using display: flex; and justify-content: space-between;.

But, I want the block that wraps the two buttons to be horizontally and vertically centered on a full page. Therefore, I wrapped everything in a parent div and applied display: flex; justify-content: center; align-items: center to the parent div. However, this results in the spacing of the buttons being reset.

Flex on parent div affecting flex of child buttons

How do I get the overall block to be horizontally and vertically centered on the page while also keeping the spacing of the buttons?

The code is here and here is a Fiddle.

HTML

<div class="form-wrap">
  <div class="button-wrap">
    <button class="button">
       Button 1
    </button>
    <button class="button">
      Button 2
    </button>
  </div>
</div>

CSS

.form-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border: 1px solid gray;
  max-width: 100vw;
  width: 100vw;
  max-height: 100vh;
  height: 100vh;
  
}

.button-wrap {
  display: flex;
  justify-content: space-between;
  max-width: 200px;
}

.button {
  padding: 20px;
  border: 1px solid gray;
  cursor: pointer;
}

.button:hover {
  background: lightyellow;
}

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You can simply add a margin to your button elements.

.form-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border: 1px solid gray;
  max-width: 100vw;
  width: 100vw;
  max-height: 100vh;
  height: 100vh;
  
}

.button-wrap {
  display: flex;
  justify-content: space-around;
  max-width: 200px;
}

.button {
  padding: 20px;
  border: 1px solid gray;
  cursor: pointer;
  margin:0 15px;
}

.button:hover {
  background: lightyellow;
}
<div class="form-wrap">
  <div class="button-wrap">
    <button class="button">
       Button 1
    </button>
    <button class="button">
      Button 2
    </button>
  </div>
</div>

Solution #2: Or you can set a width to your button-wrap element that is larger than the total width of the 2 buttons, then you will have a space between the 2 buttons, like below snippet:

.form-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border: 1px solid gray;
  max-width: 100vw;
  width: 100vw;
  max-height: 100vh;
  height: 100vh;
  
}

.button-wrap {
  display: flex;
  justify-content: space-around;
  width:250px;max-width: 250px;
}

.button {
  padding: 20px;
  border: 1px solid gray;
  cursor: pointer;
}

.button:hover {
  background: lightyellow;
}
<div class="form-wrap">
  <div class="button-wrap">
    <button class="button">
       Button 1
    </button>
    <button class="button">
      Button 2
    </button>
  </div>
</div>


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x