CODEWITHSUNDEEP
cssflexbox
klewis
klewis

Reputation: 8360

Difference between the shorthand flex and flex-basis properties

I'm seeing two different things happen to HTML elements when using flex and flex-basis. How is the second example below, using flex-basis & flex, different from the first example, using just flex?

.row {
  display: flex;
  flex-flow: row wrap;
  flex: 1 1 100%; //Three values for flex: flex-grow | flex-shrink | flex-basis
}

VS

.col {
 display: flex;
 flex-direction: column;
 flex-basis: 100%;
 flex: 1;
}

Upvotes: 1

Views: 62

Answers (1)

dippas
dippas

Reputation: 60573

Because in your last example flex will override flex-basis, and therefore the flex-basis will be redefined

const row = document.querySelector('.row'),
  col = document.querySelector('.col')


console.log(`row: ${window.getComputedStyle(row).getPropertyValue('flex-basis')}`)
console.log(`col: ${window.getComputedStyle(col).getPropertyValue('flex-basis')}`)
section:first-child {
  display: flex;
  flex-flow: row wrap;
}

section:last-child {
  display: flex;
  flex-direction: column;
}

.row {
  flex: 1 1 100%;
}

.col {
  flex-basis: 100%;
  /*this will be flex-grow:1 flex-shrink: 0 flex-basis: 0% */
  flex: 1;
}
<section>
  <div class="row">row</div>
</section>

<section>
  <div class="col">col</div>
</section>

Upvotes: 1

Related Questions