Question

根据我对see this answer对边框框的理解，用于计算剩余空间（用于向弹性项目分配可用空间），除了弹性项目的主要尺寸属性外，仅保证金包括在内。但似乎浏览器也采用边框宽度，即使是边框也是如此。以下是演示flex algorithm：

的jsfiddle

＆＃13;

.flexbox {
  display: flex;
  width: 600px;
  flex-direction: row;
}

.flexItem {
  flex: 1 0 0px;
  height: 20px;
  box-sizing: border-box;
}

.flexbox :nth-child(1) {
  background-color: blue;
}

.flexbox :nth-child(2) {
  background-color: green;
}

.flexbox :nth-child(3) {
  background-color: red;
}

＆＃13;

<div class="flexbox">
  <div class="flexItem" style="border-left: 150px solid black"></div>
  <div class="flexItem" style="border-right: 150px solid orange"></div>
  <div class="flexItem"></div>
</div>

＆＃13;

这里第一个和第二个div的宽度为250和250，第三个则取100个。这对我来说似乎不对。我是对的吗？

Flex项目与边框和框大小调整不正确：border-box

0 个答案: