CSS FlexBox |在移动设备中重新排序元素 [英] CSS FlexBox | Reordering Elements in Mobile

问题描述

我正在尝试学习CSS Flexbox，发现了一个障碍。

I'm trying to learn CSS Flexbox and found an impediment.

我的内容在桌面屏幕尺寸的左右显示，对于移动设备，我有弹性方向：列

I have content that displays right and left on desktop screen sizes and for mobile, I have flex-direction: column

查看下面的波纹管：

桌面：

移动：

这是要完成的代码：

 <div class="container">
    <div class="box box1">
      <div class="a">a</div>
      <div class="b">b</div>
    </div>
    <div class="box box2">
       <div class="c">c</div>
      <div class="d">d</div>
    </div>
  </div>

以下是flexbox样式：

These are the flexbox styles:

.box {
  color: white;
  font-size: 100px;
  text-align: center;
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
  padding: 10px;
  width: 100vw;
}

.container {
  display: flex;
  height: 100vh;
}

.a, .b, .c, .d {
  height: 50%;
}

@media all and (max-width: 500px) {
  .container {
    flex-direction: column;
  }

  .box {
     height: 50vh;
  }
}

问题：在移动设备中时：
-如何按以下顺序在列中按以下顺序显示以下div：但是：

Question: When in mobile: - How can I order the following divs to be displayed in columns (as is) however on the following order:

a

c

d

b

不幸的是，我似乎找不到解决方案。

I can't seem to find a solution for that unfortunately.

我有一个Codepen 此处重要的css行从162行开始。

I have a codepen here the css lines that matter are from line 162 onwards.

谢谢。

推荐答案

您可以考虑 display：contents （ https：// caniuse。 com /＃feat = css-display-contents ）放在 .box 元素上，则可以在内部元素上使用订单：

You can consider display:contents (https://caniuse.com/#feat=css-display-contents) on the .box element then you will be able to use order on the inner elements:

.box {
  color: white;
  font-size: 80px;
  text-align: center;
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
  padding: 10px;
  width: 100vw;
}
body {
 margin:0;
}
.container {
  display: flex;
  height: 100vh;
  background:blue;
}

.a,.b,.c,.d {
  height: 50%;
  border:2px solid;
}

@media all and (max-width: 500px) {
  .container {
    flex-direction: column;
  }
  .box {
    display:contents;
  }
  .b {
    order:2;
  }
}

<div class="container">
  <div class="box box1">
    <div class="a">a</div>
    <div class="b">b</div>
  </div>
  <div class="box box2">
    <div class="c">c</div>
    <div class="d">d</div>
  </div>
</div>

display：contents 导致元素的子元素出现，就好像它们是元素父元素的直接子元素一样，而忽略了元素本身。 在使用CSS网格或类似布局技术时应忽略包装元素的情况。

display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques.

---

如果您愿意更改html，则可以如下操作：

---

If you are open to change the html you can do it like below:

.container > * {
  color: white;
  font-size: 80px;
  text-align: center;
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
  padding: 10px;
  border:2px solid;
  box-sizing:border-box;
}
body {
 margin:0;
}
.container {
  display: flex;
  flex-direction:column;
  flex-wrap:wrap;
  height: 100vh;
  background:blue;
  padding:10px;
  box-sizing:border-box;
}

.a,.b,.c,.d {
  height: 50%;
  width:50%;
}

@media all and (max-width: 500px) {
  .a,.b,.c,.d {
    width:100%;
    height:25%;
  }
  .b {
    order:2;
  }
}

<div class="container">
    <div class="a">a</div>
    <div class="b">b</div>
    <div class="c">c</div>
    <div class="d">d</div>
</div>

并带有CSS网格：

.container > * {
  color: white;
  font-size: 80px;
  text-align: center;
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
  padding: 10px;
  box-sizing:border-box;
  border:2px solid;
}
body {
 margin:0;
}
.container {
  display: grid;
  grid-template-areas:  
    'a b'
    'c d';
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  grid-gap:10px;
  min-height: 100vh;
  background:blue;
  padding:10px;
  box-sizing:border-box;
}

.a {
  grid-area:a;
}
.b {
  grid-area:b;
}
.c {
  grid-area:c;
}
.d {
  grid-area:d;
}

@media all and (max-width: 500px) {
  .container {
   grid-template-areas:  
    'a'
    'c' 
    'd'
    'b';
  grid-template-columns:1fr;
  grid-template-rows:1fr 1fr 1fr 1fr;
   }
}

<div class="container">
    <div class="a">a</div>
    <div class="b">b</div>
    <div class="c">c</div>
    <div class="d">d</div>
</div>

这篇关于CSS FlexBox |在移动设备中重新排序元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！