Question

在屏幕宽度为1400px或更高时，我在一行中显示4个弹性箱项目。在较低的屏幕宽度下，我想在一行中显示2个弹性箱项目，在更小的设备上每行只显示一个项目。

默认的flex-wrap行为是它一个接一个地包装（从4到3到2到1）。

使用flexbox有一种简单的方法来实现这种包裹行为吗？

这是一个具有默认包装行为的codepen：https://codepen.io/anon/pen/dVOVaG

CSS

.outerDiv {
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: 0rem;
  margin-left: 0rem;
}

.innerDiv {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.imageDiv {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

HTML

<div class="outerDiv">
  <div class="innerDiv">
    <div class="imageDiv">
      <img src="http://stwv-s3.global.ssl.fastly.net/filestore/season/image/harrypotterandthecursedchild_58482_1_1_20160804105944.jpg">
    </div>
  </div>
  <div class="innerDiv">
    <div class="imageDiv">
      <img src="http://stwv-s3.global.ssl.fastly.net/filestore/season/image/harrypotterandthecursedchild_58482_1_1_20160804105944.jpg">
    </div>
  </div>
  <div class="innerDiv">
    <div class="imageDiv">
<img src="http://stwv-s3.global.ssl.fastly.net/filestore/season/image/fcbarcelona_431_1_1_20160908181513.jpg">
    </div>
  </div>
  <div class="innerDiv">
    <div class="imageDiv">
      <img src="http://stwv-s3.global.ssl.fastly.net/filestore/season/image/bethhart_1880_1_3_20161201140946.jpg">
    </div>
  </div>
</div>

Answer 1

使用flexbox有一种简单的方法来实现这种包裹行为吗？

不，Flexbox没有告诉他们一次将项目包裹2的属性。

在这种情况下最简单的方法是在标记中将它们2 2包裹起来，这里完成删除两个innerDiv，然后使剩余的innerDiv也成为flex容器（嵌套的Flexbox）容器/项目）。

＆＃13;

.outerDiv, .innerDiv {
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.innerDiv {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.imageDiv {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

＆＃13;

<div class="outerDiv">
  <div class="innerDiv">
    <div class="imageDiv">
      <img src="http://stwv-s3.global.ssl.fastly.net/filestore/season/image/harrypotterandthecursedchild_58482_1_1_20160804105944.jpg">
    </div>
    <div class="imageDiv">
      <img src="http://stwv-s3.global.ssl.fastly.net/filestore/season/image/harrypotterandthecursedchild_58482_1_1_20160804105944.jpg">
    </div>
  </div>
  <div class="innerDiv">
    <div class="imageDiv">
<img src="http://stwv-s3.global.ssl.fastly.net/filestore/season/image/fcbarcelona_431_1_1_20160908181513.jpg">
    </div>
    <div class="imageDiv">
      <img src="http://stwv-s3.global.ssl.fastly.net/filestore/season/image/bethhart_1880_1_3_20161201140946.jpg">
    </div>
  </div>
</div>

＆＃13;

要保留现有标记，请使用媒体查询并在您的断点处将innerDiv设置为min-width: 50%＆lt; 1400px（max-width: 1399px）

＆＃13;

.outerDiv {
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.innerDiv {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.imageDiv {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

@media (max-width: 1399px) {
  .innerDiv {
    min-width: 50%;
  }
}

＆＃13;

<div class="outerDiv">
  <div class="innerDiv">
    <div class="imageDiv">
      <img src="http://stwv-s3.global.ssl.fastly.net/filestore/season/image/harrypotterandthecursedchild_58482_1_1_20160804105944.jpg">
    </div>
  </div>
  <div class="innerDiv">
    <div class="imageDiv">
      <img src="http://stwv-s3.global.ssl.fastly.net/filestore/season/image/harrypotterandthecursedchild_58482_1_1_20160804105944.jpg">
    </div>
  </div>
  <div class="innerDiv">
    <div class="imageDiv">
<img src="http://stwv-s3.global.ssl.fastly.net/filestore/season/image/fcbarcelona_431_1_1_20160908181513.jpg">
    </div>
  </div>
  <div class="innerDiv">
    <div class="imageDiv">
      <img src="http://stwv-s3.global.ssl.fastly.net/filestore/season/image/bethhart_1880_1_3_20161201140946.jpg">
    </div>
  </div>
</div>

＆＃13;

自动将Flexbox项目包裹半步

1 个答案: