Question

只是尝试使用Flexbox解决一些问题，我在/rest-1.v1/Data/Story?sel=Number,Children:Task[Owners.Name='pinky']&where=Children:Task[Owners.Name='pinky']和.header之间得到了一个不受欢迎的差距。

由于.section和flex: 0 100%，align-self: flex-start应该占据整个第一行，就像它一样。

但是自.header上的align-items: stretch以来，我预计三个#container将填充剩余的垂直空间，从.section的底部到底部.header。但相反，两行之间存在很大差距。第一次使用Flexbox，我很感激任何帮助。

注意：我还没有为CSS添加所有前缀，因此不确定可以看到哪些浏览器。

＆＃13;

#container

＆＃13;

#container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: stretch;
  align-items: stretch;
  height: 300px;
  background: lightblue;
}

.header {
  margin: 0;
  flex: 0 100%;
  -webkit-align-self: flex-start;
  align-self: flex-start;
  border: 1px solid green;
}

.section {
  -webkit-flex: 1 0%;
  flex: 1 0%;
  border: 1px solid blue;
}

＆＃13;

为什么Flexbox在行之间添加空格？

0 个答案: