主页 / coding / 问题 / 79434593
Accepted
pab
Asked: 2025-02-13 06:08:05 +0800 CST

与桌面设备相比，如何在移动设备上更改 Flex Order？[重复]

  • 772

因此，我在尝试在移动设备上交换 div 1 和 div 2 时遇到了问题。

移动顺序应为 div 1、2 和 3 按该顺序堆叠。

然后在 768px 以上，需要按照以下顺序将 div 2 放在左侧，设置为 30% 宽度。然后在右侧，需要堆叠 div 1 和 div 3，以占据右侧的剩余部分。

不确定我该怎么做。我试过不用包装器，但没能成功，这是我能做到的最接近的了。

有人能帮帮我吗？

.container {
  display: flex;
  flex-direction: column; 
  gap: 10px;
}


@media (min-width: 768px) {
  .container {
    flex-direction: row; 
  }

  .specs {
    flex: 0 0 30%; 
    order: 1; 
  }

  .content-buttons {
    flex: 0 0 70%; 
    display: flex;
    flex-direction: column; 
    gap: 10px;
    order: 2; 
  }

  .content {
    flex: 1; 
    order: 1;
  }

  .buttons {
    flex: 1; 
    order: 2;
  }
}

/* Borders for visualization */
.content {border: 1px solid red;}
.specs {border: 1px solid green;}
.buttons {border: 1px solid blue;}
<div class="container">
  <div class="specs">2</div>
  <div class="content-buttons">
    <div class="content">1</div>
    <div class="buttons">3</div>
  </div>
</div>

html

2 个回答

  1. Best Answer

    桌面视图截图

    移动视图截图

    现场演示-Js-Fiddle

    注意：您的代码的问题是，如果我们将 1 和 3 分组到单独的 div 中，使用 css 我们不能在 1 和 3 div 之间插入 2，我们可能需要借助javascriptDOM 操作，然后在 1 和 3 之间附加 2。

    使用网格布局系统，可以通过在 html 本身中对spec、content、buttondiv 进行排序来解决此问题。我已删除 div content-buttons，并使 html 保持非常简单，如下所示。

    <div class="container">
  <div class="specs">2</div>
  <div class="content">1</div>
  <div class="buttons">3</div>
</div>

    解决方案桌面视图：通过指定布局来保持 div 的顺序，如 - 2、1、3，grid-template-columns: repeat(2, 1fr);这将只占用一行中的 2 列，然后通过让grid-row: 1/-1;2 个 div 在垂直方向上占用足够的空间，并将第 3 个 div 移到第 1 个 div 下方。请参阅桌面视图屏幕截图。

    为第二个 div 在一行中留出足够的垂直空间。

    .specs {
  grid-row: 1/-1;
}

    移动视图的解决方案：使用将使 div 的顺序为 - 1,2,3 一个接一个。现在可以使用 将类grid-template-columns: 1fr的顺序保持在第二个，对于内容类，使div 保持顺序 1。specsgrid-row: 2;grid-row: 1content

    @media only screen and (max-width: 768px) {
.container {
    grid-template-columns: 1fr;
}    

.content {
    grid-row: 1;
}
.specs {
    grid-row: 2;
}
}

    下面是使用网格的整体解决方案。请确保使用 js-fiddle 中的演示。运行此处的代码片段有时不会显示布局，请在完整页面中查看。

    .container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 100px);
  grid-gap: 10px;
}

.specs {
  grid-row: 1/-1;
}

@media only screen and (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }

  .content {
    grid-row: 1;
  }

  .specs {
    grid-row: 2;
  }
}

/* Borders for visualization */
.content {
  border: 1px solid red;
}

.specs {
  border: 1px solid green;
}

.buttons {
  border: 1px solid blue;
}
    <html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<div class="container">
  <div class="specs">2</div>
  <div class="content">1</div>
  <div class="buttons">3</div>
</div>

</html>

    • 3

  2. 下面的示例是一个没有在.content和周围添加额外包装器的解决方案.buttons。注意：的高度.content完全由其内容决定，布局不依赖于它（无论是在桌面还是移动设备上）。

    OP与本例的相关区别（不多）：

    • 设置 flex-items 的宽度，保持 flex 属性为默认值（flex无需设置）。

    • 当处于桌面宽度时，设置flex-wrap为wrap以便.buttons可以占据第二行。

    • 通过分配来调整.buttons水平对齐，margin-left: auto使其向右移动。

    示例中已注释详细信息。在Full page模式下查看并调整窗口大小，即可看到布局恢复为移动版（最大宽度：768px）。

    /*
1vw is equivalent to 1% width in this particular layout.
*/
*,
*::before {
  box-sizing: border-box
}

:root {
  font: 3vmax/1.5 Consolas
}

/*
Outlines are great for visualization they do not affect spacing 
like borders do.
*/
main,
section {
  outline-width: 2px;
  outline-style: dashed
}

.container {
  display: flex;
  /*
  flex-flow property is shorthand for:
    - flex-direction: row✲/column
    - flex-wrap: nowrap✲/wrap
  ✲default
  */
  flex-flow: column nowrap;
  gap: 10px;
  width: 100vw;
  /*
  Padding is optional. It's added because IRL it is most 
  likely needed.
  */
  padding: 10px;
  outline-color: black;
}

section {
  padding: 5px;
}

/*
Optional labeling
*/
section::before {
  content: attr(class)"\a0";
}

.specs {
  outline-color: red
}

.content {
  outline-color: blue
}

.buttons {
  outline-color: green
}

@media only screen and (min-width: 768px) {

  /*
  Explicitly set flex-wrap to wrap so .buttons can occupy 
  the second row.
  */
  .container {
    flex-flow: row wrap;
  }

  /*
  Remember, order property is only how the flex-items are 
  presented, the HTML is the true order of how the flex-items 
  are ordered.
  By default order is 0, so when order is set explicitly, 
  it's best to give each flex-item an appropriate order value 
  greater than 0.
  */
  .specs {
    order: 2;
    /*
    This formula is derived by:
      - 70vw is width after .content 30vw
      - 30px is .container 
                  - padding-left: 10px
                  - padding-right: 10px
                  - gap: 10px
    */
    width: calc(70vw - 30px);
  }

  .content {
    order: 1;
    /*
    In this particular layout 30vw is 30% width.
    */
    width: 30vw;
  }

  .buttons {
    order: 3;
    /*
    See comment on .specs above.
    */
    width: calc(70vw - 30px);
    /*
    This ruleset pushes .buttons to the right.
    */
    margin-left: auto;
  }
}
    <main class="container">
  <section class="specs">1</section>
  <section class="content">2</section>
  <section class="buttons">3</section>
</main>

    • 1

相关问题