你如何重新安排flex元素？

Question

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

00

00

00

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

_00_

0000

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

＆＃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;
  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;

＆＃13;

＆＃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。