Force equal width columns in CSS Flexbox

Question

I don't think what I'm trying to do is possible.

<div class="row">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

<div class="row">
    <div class="item"></div>
    <div class="item"></div>
</div>

<div class="row">
    <div class="item"></div>
</div>

How can I make all the .items to take up the maximum, identical horizontal space that is (about) 33% in the 1st one, 50% in the second one, and 100% in the last?

The idea here is to not set the size of the .items (and avoiding setting ids to elements) for maximum flexibility and minimum error surface. If this is impossible with Flexbox, but doable using another strategy, what would it be?

But what's your current CSS? `impossible with FlexBox but doable using another strategy` --> it's usually the other way around :) — Jeremy Thille, Mar 12 '18 at 14:24
`flex:1` to all element ! this is the very basic thing you learn from a Flex tuto ... — Temani Afif, Mar 12 '18 at 14:25
@pkolawa whataver, there is a ton of method to this with flexbox and i provided one — Temani Afif, Mar 12 '18 at 14:29
Currently, `flex: 1` distributes the randomly numbered items OK, but somehow they are *not* the same width — yPhil, Mar 12 '18 at 14:29
Guys, I'm confused ; You are basically all right ; What happened is that there was a `white-space: nowrap` in one of the items, causing it to take half the horiz. space of its siblings. 1+ to all of you, and thanks for your patience :/ — yPhil, Mar 12 '18 at 14:49

score 23 · Answer 1 · edited Nov 21 '22 at 22:46

You can just set width: 100%; to the .item (remove margins if you want them to take up 100% space):

.row {
  display: flex;
  flex-flow: row;
}

.item {
  background-color: teal;
  padding: 20px;
  width: 100%;
  margin: 10px;
}

<div class="row">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

<div class="row">
    <div class="item"></div>
    <div class="item"></div>
</div>

<div class="row">
    <div class="item"></div>
</div>

score 7 · Answer 2 · answered Mar 12 '18 at 14:30

7

Set flex-grow: 1; on your items.

.row {
  height : 30px;
  border : blue dashed 1px;
  display: flex;
}

.item {
   border : green solid 2px;
   flex-grow: 1;
}

<div class="row">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

<div class="row">
    <div class="item"></div>
    <div class="item"></div>
</div>

<div class="row">
    <div class="item"></div>
</div>

answered Mar 12 '18 at 14:30

Jeremy Thille

26,047
12
43
63

2

`flex-grow` will eventually cause varying widths if the contents if the `divs` vary. The most appropriate method is using `width:100%;`. – Xander Selorm May 25 '22 at 10:05

Force equal width columns in CSS Flexbox

2 Answers2