Flexible group buttons in absolute position

Admin 1
Viewed 72

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 class="flexible">
<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>

css html
2 Answers

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>

user_86203330

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 class="flexible">
<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>

user_170071840
Related