css - 简写 flex 和 flex-basis 属性之间的区别

Question

flex在使用和时，我看到 HTML 元素发生了两种不同的情况flex-basis。下面的第二个示例使用flex-basis & flex, 与第一个示例有何不同，仅使用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;
}

标签： cssflexbox

Answer 1

因为在您的最后一个示例flex中将覆盖flex-basis，因此flex-basis将重新定义

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>