CSS Flexbox：更改另一个Flex项目的位置时，Flex项目会增加

Question

在下面的示例中，我有3个flex项目。 我想做的是，当我改变蓝色的位置时，让绿色的位置增长。 我找不到在CSS中执行此操作的方法，还是应该在JS中手动编写。

 $(document).ready(function(){ $("#btnStart").click(function(){ $("#three").addClass("slide-right"); }); }); 

 main { display: flex; flex-flow: row no-wrap; width: 100%; height: 500px; justify-content: flex-start; overflow: hidden; } div { position: relative; } #one { width: 200px; background-color: red; } #two { flex: 1; background-color: green; } #three { width: 200px; background-color: blue; left: 0; transition: left 400ms; } #three.slide-right { left: 200px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <input type="button" id="btnStart" value="Start" /> <main> <div id="one"></div> <div id="two"></div> <div id="three"></div> </main> 

Answer 1

因为div的位置是relative所以left属性不会更改布局。

根据MDN关于位置的文章 ：

相对的

该关键字对所有元素进行布局，就像未放置元素一样，然后在不更改布局的情况下调整元素的位置（因此，如果没有放置元素，则在元素上会留有空隙）。 position：相对于table-*-group，table-row，table-column，table-cell和table-caption元素的影响是不确定的。

---

如果您不希望更改元素本身的宽度，则不要滑动它。 您可以将其包装在容器中，然后更改容器的宽度（请参见代码段）。

 $(document).ready(function() { $("#btnStart").click(function() { $("#threeContainer").addClass("slide-right"); }); }); 

 main { display: flex; flex-flow: row no-wrap; width: 100%; height: 500px; justify-content: flex-start; overflow: hidden; } #one { width: 200px; background-color: red; } #two { flex: 1; background-color: green; } #threeContainer { width: 200px; transition: width 400ms; } #threeContainer.slide-right { width: 0; } #three { height: 100%; width: 200px; background-color: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <input type="button" id="btnStart" value="Start" /> <main> <div id="one"></div> <div id="two"></div> <div id="threeContainer"> <div id="three"> I'm an example text that won't change when #three slides </div> </div> </main> 

Answer 2

由于元素仅在屏幕上移动，因此它使用的初始空间不可用。

您可以使用负边距释放一些空间，就像拉动绿色元素一样。

 $(document).ready(function(){ $("#btnStart").click(function(){ $("#three").addClass("slide-right"); }); }); 

 main { display: flex; flex-flow: row no-wrap; width: 100%; height: 500px; justify-content: flex-start; overflow: hidden; } div { position: relative; } #one { width: 200px; background-color: red; } #two { flex: 1; background-color: green; } #three { width: 200px; background-color: blue; left: 0; transition: left 400ms; } #three.slide-right { left: 200px; margin-left:-200px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <input type="button" id="btnStart" value="Start" /> <main> <div id="one"></div> <div id="two"></div> <div id="three"></div> </main>