CODEWITHSUNDEEP
cssflexbox
Nate
Nate

Reputation: 7866

Expand boxes with "justify-content:space-around" behavior

I'm trying to have the exactly same behavior as a justify-content:space-around but instead of having spaces between boxes, I would like my boxes to expand.

Please note that I don't want my boxes to have the same size but want the space between the boxes to have the same size.

Here is a fiddle of the desired behavior (the boxes - blue color - should fill the whole width though)

Upvotes: 0

Views: 35

Answers (1)

Oriol
Oriol

Reputation: 288520

Add flex-grow: 1 to all flex items.

This way the available space will be distributed equally among them.

body {
  padding: 50px;
}
.parent {
  background: hsl(0,0%,90%);
  display: -webkit-flex;
  display:    -moz-flex;
  display:     -ms-flex;
  display:      -o-flex;
  display:         flex;
  -webkit-justify-content: space-around;
  -moz-justify-content: space-around;
  -ms-justify-content: space-around;
  -o-justify-content: space-around;
  justify-content: space-around;    
}
.child {
  background-color:blue;
  border: 1px solid hsl(0,0%,60%);
  padding: 20px;
  flex-grow: 1;
}
<div class="parent">
  <div class="child">this is a long text</div>
  <div class="child">2</div>
  <div class="child">3</div> 
</div>

Upvotes: 1

Related Questions