html– 删除灵活项目行之间的差距

参见英文答案 > Remove space (gaps) between multiple lines of flex items when they wrap                                    1个
>            How does flex-wrap work with align-self,align-items and align-content?                                    2个
这是我的示例代码：

#parent {  display: flex;  height: 350px;  background: yellow;}#wrapper {  flex: 1;  display: flex;  flex-flow: row wrap;  margin: 0 10%;  background: #999;}#top {  flex: 1 100%;  height: 50px;  margin-top: 10px;  background: red;}#left {  wIDth: 30%;  height: 150px;  margin: 10px 10px 0 0;  background: blue;}#right {  flex: 1;  margin: 10px 0 0 0;  background: green;}

如您所见,顶部(红色)和左/右(蓝色/绿色)之间存在间隙(大灰色区域). FlexBox似乎在父元素(灰色)中均匀地传播所有内容.

但是,我不希望我的元素之间存在差距,我需要一切都“上升”到顶部.所有元素(最后)之后可能存在差距.

我尝试了所有我能找到/想到的东西：自动边距,对齐内容,对齐项目等.没有预期的效果.

怎么做到这一点？

#parent {  display: flex;  height: 350px;  background: yellow;}#wrapper {  flex: 1;  display: flex;  flex-flow: row wrap;  margin: 0 10% 50px 10%;  background: #999;  align-content: flex-start; /* Add this*/}#top {  flex: 1 100%;  height: 50px;  margin-top: 10px;  background: red;}#left {  wIDth: 30%;  height: 150px;  margin: 10px 10px 0 0;  background: blue;}#right {  flex: 1;  margin: 10px 0 0 0;  background: green;}