2

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>

I want 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, please share it.

yPhil
  • 7,507
  • 3
  • 52
  • 78
  • 2
    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
  • 2
    `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
  • 1
    flex is just shorthand, flex-basis it the most accurate one – pkolawa Mar 12 '18 at 14:27
  • 1
    @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
  • 3
    with you actual HTML, they will be the same size – Temani Afif Mar 12 '18 at 14:32
  • 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

2 Answers2

13

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>
aMJay
  • 2,066
  • 5
  • 22
  • 32
5

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>
Jeremy Thille
  • 25,196
  • 9
  • 41
  • 59
  • `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