Flexbox:负边距,为什么这样做?

时间:2016-03-24 22:28:55

标签: html css flexbox

所以我正在玩一个布局,我偶然发现了一个很酷的技巧,但我不知道为什么会有效?链接到示例。

http://codepen.io/TaylorHuston/pen/NNjZqZ

<div id="container">
  <div id="left">
  </div>
  <div id="right">
    <button id="expand">Expand</button>
  </div>
</div>

.....

body {
  background-color: green;
}
#container {
  display: flex;
  background-color: white;
  width: 1300px;
  height: 500px;
  margin: 0px auto; 
}

#left {
  background-color: grey;
  width: 0;
  transition: all .2s ease;
}

#left.expanded {
  width: 300px;
}

#right {
  flex: 0 0 100%;
  margin-right: -400px;
}

....

$('#expand').click(function() {
  $('#left').toggleClass('expanded');
});

使用该代码,当您点击&#39;展开&#39;按钮,左列扩展到300px宽,右列超过300px。它实际上被推翻了,它并没有相应缩小。如果没有设置负边距,则没有任何反应,因为#right是100%宽度。为什么负边距允许#right在左边有东西的情况下被推动,但是当没有#t?t时,它实际上没有移动或影响它?

0 个答案:

没有答案