Question

我使用FlexBox CSS构建了一个简单的页面，我不明白为什么当我在其中一个项目上使用百分比边距时，容器的宽度不会扩展。

注意：Chrome / FireFox中存在问题。

密码笔：https://codepen.io/dsomekh/pen/QvGvrq

示例：

<html>
<style>
.page{
    display:flex;
    /*border: 5px solid orange;*/
}

.container{

display:flex;
border: 5px solid orange;
}
.item_left{
display:flex;
margin-right:25%;
}

.item_right{
display:flex;

}
</style>
<div class="page">
    <div class="container">
        <div class="item_left">Left</div>
        <div class="item_right">Right</div>
    </div>
</div>
</html>

Answer 1

您使用flexbox时出错了。

尝试

＆＃13;

.container{
  display:flex;
}

.item_left {
  flex: 1;
  border: 5px solid orange;
  margin-right:25%;
}

.item_right {
  flex: 1;
  border: 5px solid orange;
}

＆＃13;

<div class="page">
	<div class="container">
		<div class="item_left">Left</div>
		<div class="item_right">Right</div>
	</div>
</div>

＆＃13;

Answer 2

正如Michael Coker所述，作者应该完全避免在弹性项目中使用填充或边距的百分比，因为它们会在不同的浏览器中获得不同的行为。（CSS Flexbox margins）< / p>

使用百分比时，我们经常将其与视口宽度相关联，因此，考虑到这一点，视口单元vw / vh可能是一个不错的选择，因为它的工作方式类似（响应）。

由您的Codepen示例构成的堆栈代码

.page {
  display: flex;
  /*border: 5px solid orange;*/
}

.container {
  display: flex;
  border: 5px solid orange;
}

.item_left {
  flex: 1;
  margin-right: 25vw;
}

.item_right {
  display: flex;
  flex: 1;
}

<div class="page">
  <div class="container">
    <div class="item_left">Left</div>
    <div class="item_right">Right</div>
  </div>
</div>

由您的问题代码构成的堆栈代码

.page {
  display: flex;
  /*border: 5px solid orange;*/
}

.container {
  display: flex;
  border: 5px solid orange;
}

.item_left {
  display: flex;
  margin-right: 25vw;
}

.item_right {
  display: flex;
}

<div class="page">
  <div class="container">
    <div class="item_left">Left</div>
    <div class="item_right">Right</div>
  </div>
</div>

FlexBox - 使用百分比边距时容器宽度不会扩展

2 个答案: