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

user8231918 发表于 Dev

用户名

我有一个父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;
}

或Drori

采取项目完全不在Flexbox的流量，你可以将它的位置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%上进行设置：

/* 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 **/
}

<div class="boxContainer">
  <div class="headerBox">headerBox</div>

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

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

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

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

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

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

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。