代码之家 › 专栏 › 技术社区 › klewis

理解速记flex和flex基本属性之间的差异

flexbox

klewis · 技术社区 · 5 年前

flex 和 flex-basis flex-basis & 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;
}

0 回复 | 直到 5 年前

dippas 5 年前

因为在你的最后一个例子中 flex 将覆盖 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>

推荐文章

JWWalker · CSS的resize属性可以用来调整flex列宽吗?

1 年前

Sidaqpreet Singh · 为什么当设置为包裹时,柔性包裹会导致横轴出现间隙?

1 年前

rifx · 在kendoTreeViewNodeTemplate(Angular)中设置数据项的样式

1 年前

Fox L · 每行4个项目,但如果少于4个项目则留空?

1 年前

Zack Riquelme · 如何使用CSS将HTML的<header>中的<a>和<nav>内容在同一个父框中左右拆分?

2 年前

JobHunter69 · 为什么这个组件不填充整个宽度?

2 年前

Vasantha Kalyani · Flexbox Html CSS设置位置问题[重复]

2 年前

coder · 边界半径不适用于容器元素

2 年前

user9026 · 项目登录页面(freecodecamp)定价设计

2 年前

Bo Thompson · 根据需要调整柔性物品的高度,但不得超过容器

2 年前