Question

需要在iPad垂直方向上定位一些元素，如下所示：

在iPad横向上，它们放置如下：

_00_

0000

我通过使用flex-elements和隐藏项来解决这个问题。但我需要一个只使用flexbox（没有隐藏元素）的解决方案。

＆＃13;

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #999;
}
.wrap {
  margin: 0 auto;
  overflow: hidden;
  height: 100%;
}
.icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  justify-content: space-around;
  height: 100%;
}
.icons_item {
  width: 50%;
  height: 33%;
  display: flex;
}
.icons_item_hide {
  display: none;
}
.icon {
  width: 100%;
  display: block;
}
.icon img {
  display: block;
  width: 66%;
  margin: 0 auto;
}
/* iPad h*/

@media screen and (max-width: 1024px) {
  body {
    background: green;
  }
  .icons_item {
    width: 25%;
    height: 50%;
  }
  .icons_item_hide {
    display: block;
  }
  .icon img {
    width: 66%;
  }
}
/* iPad v*/

@media screen and (max-width: 768px) {
  body {
    background: maroon;
  }
  .icons_item {
    width: 50%;
    height: 33%;
  }
  .icons_item_hide {
    display: none;
  }
  .icon img {
    width: 66%;
  }
}
/* iphone6Plus */

@media screen and (max-width: 414px) {
  body {
    background: orange;
  }
}
/* iphone6 */

@media screen and (max-width: 375px) {
  body {
    background: lime;
  }
}
/* iphone5 */

@media screen and (max-width: 320px) {
  body {
    background: red;
  }
}

＆＃13;

<div class="wrap">
  <div class="icons">
    <div class="icons_item icons_item_hide">
      <a class="icon" href=""></a>
    </div>
    <div class="icons_item">
      <a class="icon" href="">
        <img src="images/circle_border.png">
      </a>
    </div>
    <div class="icons_item">
      <a class="icon" href="">
        <img src="images/circle_border.png">
      </a>
    </div>
    <div class="icons_item icons_item_hide">
      <a class="icon" href=""></a>
    </div>
    <div class="icons_item">
      <a class="icon" href="">
        <img src="images/circle_border.png">
      </a>
    </div>
    <div class="icons_item">
      <a class="icon" href="">
        <img src="images/circle_border.png">
      </a>
    </div>
    <div class="icons_item">
      <a class="icon" href="">
        <img src="images/circle_border.png">
      </a>
    </div>
    <div class="icons_item">
      <a class="icon" href="">
        <img src="images/circle_border.png">
      </a>
    </div>
  </div>
</div>

＆＃13;

jsfiddle

website page

Answer 1

在主屏幕上，您可以通过将每个项目的长度设置为width: 50%来获得每行两个弹性项目。

要将布局从每行两个，顶部两个，底部四个，请尝试：

@media screen and (max-width: 1024px) {
    .icons_item:nth-child(n+3) {  width: 25%; }
}

此规则将选择除前两个之外的所有弹性项，允许四个显示在一行中。

＆＃13;
＆＃13;
body, html { margin: 0; padding: 0; height: 100%; background: #999; } .wrap { margin: 0 auto; overflow: hidden; height: 100%; } .icons { display: flex; flex-wrap: wrap; height: 100%; } .icons_item { width: 50%; height: 33%; display: flex; justify-content: center; } .icon img { display: block; width: 40px; height: 40px; margin: 0 auto; } /* iPad h*/ @media screen and (max-width: 1024px) { body { background: green; } .icons_item:nth-child(n+3) { width: 25%; } } /* iPad v*/ @media screen and (max-width: 768px) { body { background: maroon; } /* iphone6Plus */ @media screen and (max-width: 414px) { body { background: orange; } } /* iphone6 */ @media screen and (max-width: 375px) { body { background: lime; } } /* iphone5 */ @media screen and (max-width: 320px) { body { background: red; } }
＆＃13;
<div class="wrap"> <div class="icons"> <div class="icons_item"> <a class="icon" href=""> <img src="http://i.imgur.com/60PVLis.png"> </a> </div> <div class="icons_item"> <a class="icon" href=""> <img src="http://i.imgur.com/60PVLis.png"> </a> </div> <div class="icons_item"> <a class="icon" href=""> <img src="http://i.imgur.com/60PVLis.png"> </a> </div> <div class="icons_item"> <a class="icon" href=""> <img src="http://i.imgur.com/60PVLis.png"> </a> </div> <div class="icons_item"> <a class="icon" href=""> <img src="http://i.imgur.com/60PVLis.png"> </a> </div> <div class="icons_item"> <a class="icon" href=""> <img src="http://i.imgur.com/60PVLis.png"> </a> </div> </div> </div>
＆＃13;
＆＃13;
＆＃13;

revised fiddle

Answer 2

IMO，

可以实现理想的行为

flex-wrap: wrap-reverse;

请见the updated fiddle。

你如何重新安排flex元素？

2 个答案: