[Vuejs]-CSS – How to properly use flex-basis?

When you specify a length in flex-basis, you’re specifying the length of individual items along the flex axis. When you specify a percentage this way, the percentage is equal to a fraction of the parent container’s size! You can see this in MDN’s flex-basis definition, in the section on "Values" which explains the possible values you can give this property:

<‘width’>
An absolute <length>, a <percentage> of the parent flex container’s main size property, or the keyword auto. Negative values are invalid. Defaults to auto.

This means, assuming your flex is oriented as a row:

• If you specify flex-basis: 200px, the flex items will each have a width of 200px.
• If you specify flex-basis: 25%, the flex items will each have a width of 25% of the parent width. If the parent container is 100px, they will each have a width of 25px.

For the purposes of flex wrapping, any gap defined has to be respected in addition to the flex basis. If you have flex-basis: 25% plus a 25% gap, that flex item occupies 50% of the width of the container.

It’s no surprise your rows are wrapping — you’ve defined them collectively as 150% of their parent width! The gap would also exacerbate things: a 50% width plus any gap means the cell has to occupy more than half the horizontal space, so there’s no possibility to have columns.

If you want fractional sizing along a row, where each element takes up an equal share of its parent width, you should be using CSS Grid with grid-auto-columns: 1fr. This is especially if you want cell gaps: when you define grid cells with fractional sizes and a gap, both can be respected simultaneously.

The below snippet demonstrates the following things:

1. Defining an exact flex-basis in a flex box with 200px width
2. Defining a percentage flex-basis in an identical flex box
3. Using CSS Grid in one single row
4. Using CSS Grid with wrapping

.flex-absolute-width,
.flex-relative-width,
.grid,
.grid-wrapped {
  width: 200px;
  border: 1px solid blue;
  gap: 8px;
}

.cell {
  outline: 1px dashed red;
}

.flex-absolute-width,
.flex-relative-width {
  display: flex;
  flex-flow: row wrap;
}

.flex-absolute-width .cell {
  flex-basis: 50px;
}

.flex-relative-width .cell {
  flex-basis: 50%;
}

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* each column shares 1fr width */
  grid-auto-flow: column; /* prefer to flow into new columns */
}

.grid-wrapped {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
}

Flex-basis 50px:
<div class="flex-absolute-width">
  <div class="cell">a</div>
  <div class="cell">b</div>
  <div class="cell">c</div>
</div>

Flex-basis 50%:
<div class="flex-relative-width">
  <div class="cell">a</div>
  <div class="cell">b</div>
  <div class="cell">c</div>
</div>

A grid with each column being told to use the same fraction of width:
<div class="grid">
  <div class="cell">a</div>
  <div class="cell">b</div>
  <div class="cell">c</div>
</div>

A wrapped grid with each column being told to use the same fraction of width:
<div class="grid-wrapped">
  <div class="cell">a</div>
  <div class="cell">b</div>
  <div class="cell">c</div>
</div>