简写flex和flex基础属性之间的差异

Question

使用flex和flex-basis时，HTML元素会发生两种不同的情况。下面使用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
}

与

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

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>