使用响应式页面重新分配 div 中的项目

Question

我从这个问题的代码中编辑了几行 link

#wrap {
    margin: 20px auto;
    width: 80%;
    
}

.separator { 
    margin-top: 30px;
}

.row {
    height: 30px; margin-bottom: 10px; background-color: green;
}

.left,
.right {
    width: 33%; height: 30px; line-height: 30px;
    display: inline-block;
    text-align: center;
    background-color: grey;
}

.left { margin-right: 10px; }
.right { margin-left: 10px; }

.center {
    min-height: 30px; line-height: 30px;
    text-align: center;
    background-color: blue;
  display: inline-block;
  width: 30%;
}

<div id="wrap">

    <div class="left">left</div>
    <div class="center">center</div>
    <div class="right">right</div>
    <div class="separator"></div>
    <div class="left">left</div>
    <div class="center">center</div>
    <div class="right">right</div>  

</div>

当 windows 的尺寸变得太小时，例如在移动设备上，它会变得一团糟。发生这种情况时，如何垂直重新分配项目，一个项目为一行，左边是第一个，中间是第二个，依此类推。

我实际上在 React 中使用它，只是为了知道。

Answer 1

您可以使用 CSS Flexbox 在大屏幕上并排放置项目，并使用媒体查询检测移动设备并垂直对齐项目。

#wrap {
  margin: 20px auto;
  width: 80%;
}
.row {
  display: flex;
}
/* mobile */
@media screen and (max-width: 700px) {
  .row {
    flex-direction: column;
  }
}

.box {
  width: 100%;
  height: 100px;
  background: blue;
  margin: 0.5em;
}

<div id="wrap">
  <div class="row">
    <div class="box">left</div>
    <div class="box">center</div>
    <div class="box">right</div>
  </div>
  <div class="row">
    <div class="box">left</div>
    <div class="box">center</div>
    <div class="box">right</div>
  </div>
</div>

Answer 2

有显示`grid`

您可以在网格父节点上使用 grid-template-areas 选择器和grid-areas在grid childrenselectors 以 order 放置您希望它们显示在文档中的元素，尽管它们在 HTML 中的顺序。您只需更改媒体查询中的网格属性。

#cont {
  display: grid;
  grid-auto-columns: 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "left-1 center-1 right-1" 
    "left-2 center-2 right-2";
  gap: .5rem;
}

.box {
  height: 100px;
  background: blue;
  margin: 0.5rem;
}


.left-1 {
  grid-area: left-1;
}

.left-2 {
  grid-area: left-2;
}

.center-1 {
  grid-area: center-1;
}

.center-2 {
  grid-area: center-2;
}

.right-1 {
  grid-area: right-1;
}

.right-2 {
  grid-area: right-2;
}


/* mobile */

@media screen and (max-width: 700px) {
  #cont {
    display: grid;
    grid-auto-columns: auto;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: 
        "left-1" 
        "left-2" 
        "center-1" 
        "center-2" 
        "right-1" 
        "right-2";
    gap: .5rem;
  }
}

<div id="cont">
  <div class="left-1 box">left</div>
  <div class="center-1 box">center</div>
  <div class="right-1 box">right</div>
  <div class="left-2 box">left</div>
  <div class="center-2 box">center</div>
  <div class="right-2 box">right</div>
</div>

您可以在不使用显示网格并仅添加媒体查询的情况下执行以下操作：

然而，您无法像使用网格或柔性显示那样控制元素的重新排序，您可以使用 box-ordinal-group 来更改元素的顺序，但是它已从标准中删除，引入了 flex - 顺序和网格 .

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#cont {
  width: calc(100% - 5px);
  height: auto;
  margin: 5px;
}

.box {
  min-width: calc(33.3% - 5px);
  height: 100px;
  background: blue;
  display: inline-block;
}

.box~.box {
  margin-top: 5px;
}

@media screen and (max-width: 700px) {
  #cont {
    width: calc(100% - 5px);
    margin: 5px;
  }
  .box {
    min-width: calc(100% - 5px);
    height: 100px;
  }
}

<div id="cont">
  <div class="box">left</div>
  <div class="box">center</div>
  <div class="box">right</div>
  <div class="box">left</div>
  <div class="box">center</div>
  <div class="box">right</div>
</div>

使用 flex box 和 order

~ 使用 Flexbox 时更改内容的视觉顺序。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#cont {
  display: flex;
  flex-wrap: wrap;
}

.box {
  min-width: calc(33.3% - 10px);
  height: 100px;
  background: blue;
  display: inline-block;
  margin: 5px;
}



@media screen and (max-width: 700px) {
  #cont {
    width: calc(100% - 10px);
    margin: 5px;
  }
  .box {
    min-width: calc(100% - 10px);
    height: 100px;
  }
  .box:nth-of-type(1) {
    order: 1;
  }
  .box:nth-of-type(2) {
    order: 3;
  }
  .box:nth-of-type(3) {
    order: 5;
  }
  .box:nth-of-type(4) {
    order: 2;
  }
  .box:nth-of-type(5) {
    order: 4;
  }
  .box:nth-of-type(6) {
    order: 6;
  }
}

<div id="cont">
  <div class="box">left row 1</div>
  <div class="box">center row 1</div>
  <div class="box">right row 1</div>
  <div class="box">left row 2</div>
  <div class="box">center row 2</div>
  <div class="box">right row 2</div>
</div>

使用响应式页面重新分配 div 中的项目

reallocate items inside a div with responsive pages

html

css

responsive

有显示`grid`

您可以在不使用显示网格并仅添加媒体查询的情况下执行以下操作：

使用 flex box 和 order

使用响应式页面重新分配 div 中的项目

reallocate items inside a div with responsive pages

html

css

responsive

有显示grid

您可以在不使用显示网格并仅添加媒体查询的情况下执行以下操作：

使用 flex box 和 order

有显示`grid`