首页 文章

将flexbox项目自动包裹半步

提问于
浏览 次
1

在屏幕宽度为1400px或更高时，我在一行中显示4个flexbox项目 . 在较低的屏幕宽度下，我想在一行中显示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>
html css css3 flexbox

1 回答

  • 2

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

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

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

    .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;
}

    <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>

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

    .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%;
  }
}

    <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>
    回复于

相关问题