Flexible group buttons in absolute position-CodePudding

I know the answer seems easy, but I've searched everything on the internet and can not find anything.

I have 5 buttons that work with relative position. I'm curious if I can use absolute position in any way. Of course, the buttons must be flex, ie if the page is stretched, the buttons must be stretched as well (without media queries). Τhank you very much!!!.

.flexible {
  display: flex;
  width:100%;
}

#one, #two, #three, #four, #five {
  background: purple;
  color: #fff;
  border: 1px solid #fff;
  top:0px;
  bottom:0px;
  width: 100%;
  height: 50px;
  position:relative;
  vertical-align: middle;
  font-size: 30px;
  text-align: center;
 }
 
#one:hover, #two:hover, #three:hover, #four:hover, #five:hover { 
  background: #9a009a;  
  color: #fff;
}

<center >
<button id="one">1</button>
<button id="two">2</button>
<button id="three">3</button>
<button id="four">4</button>
<button id="five">5</button>
</center>

CodePudding user response：

Yes you can but it remain a very specific solution to your specific case. It's not a generic solution

#one, #two, #three, #four, #five {
  background: purple;
  color: #fff;
  border: 1px solid #fff;
  height: 50px;
  font-size: 30px;
  text-align: center;
  
  position: absolute;
  top: 0;
  width: calc(100%/5); /* 20% */
}
#one   {left: calc(0*100%/5)} /* 0%  */
#two   {left: calc(1*100%/5)} /* 20% */
#three {left: calc(2*100%/5)} /* 40% */
#four  {left: calc(3*100%/5)} /* 60% */
#five  {left: calc(4*100%/5)} /* 80% */

[id]:hover {
  background: #9a009a;
}

<button id="one">1</button>
<button id="two">2</button>
<button id="three">3</button>
<button id="four">4</button>
<button id="five">5</button>

CodePudding user response：

I don't know why you use position for the children at all, while you used flex for container. But you can give the position: absolute to .flexible if it is proper for you:

.flexible {
  display: flex;
  width:100%;
  position: absolute;
  top: 0;
}

button {
  background: purple;
  color: #fff;
  border: 1px solid #fff;
  width: 100%;
  height: 50px;
  vertical-align: middle;
  font-size: 30px;
  text-align: center;
 }
 
button:hover { 
  background: #9a009a;  
  color: #fff;
}

<center >
<button id="one">1</button>
<button id="two">2</button>
<button id="three">3</button>
<button id="four">4</button>
<button id="five">5</button>
</center>