左边距在 display flex 上不起作用，但在内部 child 上起作用如何？

Question

child1：侧面内容，child2：显示 flex。

我需要 child2 向左移动 150px。

如果我在 child2 上设置 margin-left 它不起作用。

但是如果我在 child 的 child 上设置 margin-left 2 它会起作用。

.side {
  width: 200px;
  float: left;
  position: relative;
}
.table-wrap {
  margin-left: -150px; /* doesn't work */
}
.table {
  margin-left: -150px; /* doesn't work */
  display: flex;
}
.item {
  margin-left: -150px; /* works oyea */
}
.stuff {
  width: 100px;
  height: 100px;
  background: green
}

<div class="content">
  <div class="side">
    side content
  </div>
  <div class="table-wrap">
    <div class="table">
      <div class="item"></div>
      <div class="stuff"></div>
    </div>
  </div>
</div>

为什么？笔：http://codepen.io/anon/pen/JGwVpP

Answer 1

在 .table 元素上尝试 display: inline-block 而不是 display: flex;。

Answer 2

那是因为浮点数是out-of-flow，所以重叠了.table-wrap。但是它减少了里面的line boxes的长度。

然后好像是忽略了边距，其实不是：.table-wrap确实向左移动了，但内容不是因为浮动。

相反，您应该 .table-wrap 建立一个新的块格式化上下文 (BFC)。这样就不会和浮动重叠了。

例如可以用overflow: hidden、display: inline-block或float: left建立BFC。这里前者会很糟糕，因为它会隐藏由于负边距而溢出的内容，所以使用其他之一。

.side {
  width: 200px;
  float: left;
  position: relative;
}
.table-wrap {
  display: inline-block; /* Establish Block Formatting Context */
  margin-left: -150px;   /* Now this works */
}
.table {
  display: flex;
}
.stuff {
  width: 100px;
  height: 100px;
  background: green
}

<div class="content">
  <div class="side">
    side content
  </div>
  <div class="table-wrap">
    <div class="table">
      <div class="item"></div>
      <div class="stuff"></div>
    </div>
  </div>
</div>

或者，由于您已经在使用 flexbox，您可以使 .content 成为一个 flex 容器而不是浮动容器 .side

.content {
  display: flex;
}
.side {
  width: 200px;
  position: relative;
}
.table-wrap {
  margin-left: -150px; /* Now this works */
}
.table {
  display: flex;
}
.stuff {
  width: 100px;
  height: 100px;
  background: green
}

<div class="content">
  <div class="side">
    side content
  </div>
  <div class="table-wrap">
    <div class="table">
      <div class="item"></div>
      <div class="stuff"></div>
    </div>
  </div>
</div>

左边距在 display flex 上不起作用，但在内部 child 上起作用如何？

margin left doesn't work on display flex but works on inner child how?

html

css

css-float

flexbox