在桌面视图上将flexbox项目推到右侧[重复]

问题描述 投票:3回答:2

这个问题在这里已有答案:

我有一个问题,我发现很难解释,因此很难找到正确的答案。

在移动设备上我想要以下布局:

|.info   |
----------
|.content|
| content|
| column |
----------
|.map    |

但是,在桌面上,这需要响应地适应变为

|.content   | .info |
| content   |-------|
|  column   | .map  |

我已经尝试找到答案,但我甚至不知道该寻找什么。我尝试了一些Flexbox方法,但它在内容下的新行中以.map结尾,而我希望.map位于内容的右侧,就在.info下面。

html css css3 flexbox
2个回答
0
投票

您可以轻松地在CSS Grid layout中执行此操作以及定位移动屏幕的媒体查询 - 请参阅以下演示内联解释:

.wrapper {
  display: grid; /* defines a grid container */
  grid-template-columns: 1fr 1fr; /* defines a 2-column grid layout */
}

.content {
  grid-column: 1; /* place this in the first column */
  grid-row: 1 / 3; /* span across the first two rows */
}

.wrapper > *{
  border: 1px solid;
}

@media screen and (max-width: 768px) {
   .wrapper {
     grid-template-columns: 1fr; /* a single column grid container */
   }
   .content {
      grid-row: initial; /* reset the spanning rows in mobile view */
   }
}
<div class="wrapper">
  <div class="header">info</div>
  <div class="content">content</div>
  <div class="footer">map</div>
</div>

1
投票

您肯定可以通过@media查询规则来处理它,这样在桌面布局中您可以使用以下列流:

.my-class {
    display: flex;
    flex-flow: column;
}

在平板电脑/移动设备上,如下所示:

@media (--small-only) {
    flex-flow: row;
}

当然,您必须根据需要定义适当的订单参数。我建议阅读this指南,因为它简单而完整。

© www.soinside.com 2019 - 2024. All rights reserved.