html - 如何重新排列 flex 元素？

iPad垂直方向上需要定位以下几个元素：

00

00

00

在iPad横向定位上，它们的位置如下：

_00_

0000

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

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

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

jsfiddle
website page

最佳答案

在主屏幕上，通过将每行的长度设置为width: 50%，每行有两个flex项。
要将布局从每行两个移动到顶部两个和底部四个，请尝试以下操作：

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

此规则将选择除前两个之外的所有flex项，允许四个项出现在一行中。

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

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

revised fiddle