Flexbox: making nth columns within row same width

Asked Nov 22 '21 at 14:32

Active Nov 22 '21 at 14:46

Viewed 28 times

Sorry to ask such a basic question about flexbox, but I have a 2 row, 2 col grid and want to make the first col in each row the same width, such that the smileys occur immediately after the longer YEET (and the smileys are at the same point in the x-axis, if you will):

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

.col {
  display: flex;
  flex-direction: column;
}

<div class='row'>
  <div class='col a'>YEET</div>
  <div class='col b'>:)</div>
</div>

<div class='row'>
  <div class='col a'>YEET STICK</div>
  <div class='col b'>:)</div>
</div>

I know I can assign .a a static fixed width like so:

.a {
  flex: 0 0 105px;
}

But I want the width of the longer text box to set the width of both text boxes (rather than some arbitrary cutoff like 105px).

I believe it's possible to achieve this goal with flex-grow, but am not sure just how. Any pointers others can offer would be greatly appreciated!

edited Nov 22 '21 at 14:46

asked Nov 22 '21 at 14:32

duhaime

25,611
17
169
224

1

you are describing a table layout not a flexbox one – Temani Afif Nov 22 '21 at 14:41
There must be a way to accomplish this with flexbox, right? – duhaime Nov 22 '21 at 14:42
1

using a hacky and approximate code, yes you can do it with flexbox .. but it's still a table layout. Flexbox is not a magic solution to everything: https://jsfiddle.net/hdzgf863/ – Temani Afif Nov 22 '21 at 14:46
How about fixed width? Like `width: 30%; min-width: 100px;`? – Sato Takeru Nov 22 '21 at 14:47
That's an arbitrary cutoff, which I don't want to use. I'll use display table to get this shipped but I would like to know if there exists a flexbox solution... – duhaime Nov 22 '21 at 14:48
1

Flexbox is not used for template like this. That is why we have tools like `table` and `display: grid` (which I recommend for this) – ciekals11 Nov 22 '21 at 14:56
Indeed, not possible with CSS in Flexbox, you need CSS-Grid (or a table). – Paulie_D Nov 22 '21 at 15:09

Flexbox: making nth columns within row same width

0 Answers0