CODEWITHSUNDEEP
cssflexbox
Paul Draper
Paul Draper

Reputation: 83263

How to use flex to have proportional columns?

I'm learning flexbox.

I'm trying to make elements on a single row that are proportionally sized with a fixed 1:2 ratio.

.cell {
  padding: 8px 16px;
}

.cell > div {
  height: 30px;
}

.row {
  display: flex;
}
<div class="row">
   <div class="cell" style="flex: 1"><div style="background: red"></div></div>
   <div class="cell" style="flex: 1"><div style="background: blue"></div></div>
   <div class="cell" style="flex: 1"><div style="background: yellow"></div></div>
</div>
<div class="row">
   <div class="cell" style="flex: 1"><div style="background: green"></div></div>
   <div class="cell" style="flex: 2"><div style="background: purple"></div></div>
</div>

Why doesn't the flex property achieve this?

Can this be achieved with flexbox? (It could be achieved via other means, but I'm learning how flexbox works.)

Upvotes: 1

Views: 197

Answers (1)

Nandita Sharma
Nandita Sharma

Reputation: 13407

Remove the padding from .cell and add margin in the div inside cell (.cell>div)

.cell>div {
  height: 30px;
  margin: 8px 16px;
}


.cell>div {
  height: 30px;
  margin: 8px 16px;
}

.row {
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  display: flex;
}
<div class="row">
  <div class="cell" style="flex-grow: 1;flex-shrink: 1;flex-basis: 0%;">
    <div style="background: red"></div>
  </div>
  <div class="cell" style="flex-grow: 1;flex-shrink: 1;flex-basis: 0%;">
    <div style="background: blue"></div>
  </div>
  <div class="cell" style="flex-grow: 1;flex-shrink: 1;flex-basis: 0%;">
    <div style="background: yellow"></div>
  </div>
</div>
<div class="row">
  <div class="cell" style="flex-grow: 1;flex-shrink: 1;flex-basis: 0%;">
    <div style="background: green"></div>
  </div>
  <div class="cell" style="flex-grow: 2;flex-shrink: 1;flex-basis: 0%;">
    <div style="background: purple"></div>
  </div>
</div>

Upvotes: 1

Related Questions