你如何重新安排flex元素？

There are a few elements that need to be located on the iPad vertical orientation as follows:

需要在iPad垂直方向上放置一些元素,如下所示:

and on iPad landscape orientation, they are placed as follows:

在iPad横向上,它们放置如下:

_00_

0000

I solved this problem by using flex-elements and hidden items. But I need a solution that uses only flexbox (without hidden elements).

我通过使用flex-elements和隐藏项来解决这个问题。但我需要一个只使用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

2 个解决方案

#1

On the main screen, you've got two flex items per row by setting the length of each to width: 50%.

在主屏幕上,通过设置每个宽度的长度:50%,每行有两个弹性项目。

To shift the layout from two per row, to two on top and four on the bottom, try this:

要将布局从每行两个,顶部两个,底部四个,请尝试以下方法:

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

This rule will select all flex items except the first two, allowing four to appear in a row.

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

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

#2

IMO, the desired behavior is achievable with

IMO,期望的行为是可以实现的

flex-wrap: wrap-reverse;

Pleas see the updated fiddle.

请看看更新的小提琴。

#1