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

Question

有几个元素需要定位在 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

Answer 1

在主屏幕上，通过将每个元素的长度设置为 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