如何让div忽略其父项的显示：flex

Question

我有一个父div用display: flex。我希望其中一个孩子div可以忽略这一点。

例如，我想要这样的东西：

儿童div1

儿童div2，儿童div3，儿童div4

我希望第一个Child div1位于顶部，而行中没有任何其他元素。我知道，只要将孩子div1移到其父级之外，我就可以实现这一目标，但是很高兴知道另一种方式。

/* Parent div */
.boxContainer {
    display: flex;
    height: 500px;
    width: 100%;
}

/* Child div1 */
.headerBox {
    height: 100px;
}
 /* more child div */
.imgBox {
    margin-top: 100px;
    height: 375px;
    width: 375px;
}

Answer 1

我希望第一个Child div1位于顶部，而行中没有任何其他元素。

最简单的方法是设置flex-basis: 100%第一个孩子。

这样，它将占用整个宽度并向下推其余项目，并且它具有充分的响应能力。

另外，您需要添加 flex-wrap: wrap;

/* Parent div */
.boxContainer {
  display: flex;
  flex-wrap: wrap;               /*  added  */
  align-content: flex-start;     /*  added, so they align at the top  */
  height: 500px;
  width: 100%;
}

/* Child div1 */
.headerBox {
  flex-basis: 100%;              /*  added  */
  height: 100px;
  background: lightblue;
  margin: 2px;
}

/* more child div */
.imgBox {
  height: 175px;
  width: 175px;
  background: lightgray;
  margin: 2px;
}

<div class="boxContainer">

  <div class="headerBox">Header box</div>

  <div class="imgBox">Image box</div>
  <div class="imgBox">Image box</div>
  <div class="imgBox">Image box</div>

</div>

Answer 2

要将项目完全置于弹性盒流程之外，您可以将其位置设置为absolute，然后使用 、 等将其移动到您想要的top位置left...

设置position: absolute在子级和position: relative父级上：

.boxContainer {
  /** Parent div **/
  position: relative;
  display: flex;
  height: 500px;
  width: 100%;
}

.headerBox {
  /** Child div1 **/
  position: absolute;
  top: -50px;
  /** move it up **/
  height: 100px;
}

.imgBox {
  /** more child div **/
  margin-top: 100px;
  height: 375px;
  width: 375px;
}

如果您只需要分开第一个项目，您可以使用弹性包装，并设置margin-right: 100%在第一个元素上：

.boxContainer {
  /** Parent div **/
  position: relative;
  display: flex;
  height: 500px;
  width: 100%;
}

.headerBox {
  /** Child div1 **/
  position: absolute;
  top: -50px;
  /** move it up **/
  height: 100px;
}

.imgBox {
  /** more child div **/
  margin-top: 100px;
  height: 375px;
  width: 375px;
}

/* Parent div */

.boxContainer {
  display: flex;
  height: 200px; /** I've changed the dimensions to fit the demo windows **/
  width: 100%;
  flex-wrap: wrap;
}


/* Child div1 */

.headerBox {
  margin-right: 100%;
  height: 100px;
}


/* more child div */

.imgBox {
  height: 75px;
  /** I've changed the dimensions to fit the demo windows **/
  width: 75px;
  /** I've changed the dimensions to fit the demo windows **/
}