下面你会看到我所拥有的。 当它用响应式包装时,我会将.image.content框居中对齐。 在较大的视口上,将.image保持在左侧,将.content保持在右侧非常重要。

任何的想法 ?

 .container{ display: flex; justify-content: space-between; flex-wrap: wrap; } .image{ width: 200px; height: 50px; background-color: orange; } .content{} .list{ display:flex; }
 <div class="container"> <div class="image"> Image </div> <div class="content"> <ul class="list"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> </div> </div>

#1楼 票数:0

您可以使用媒体查询来实现响应

@media (max-width: 767px) {
   .container {
      flex-direction: column;
      align-items: center;
    }
}

#2楼 票数:0

您可以为移动设备添加此 css

@media (max-width: 768px) {
   .container {
      justify-content: center;
    }
}

  ask by chles translate from so

未解决问题?本站智能推荐:

1回复

仅当没有空间容纳所有项目时,才显示(包装)所有项目(没有媒体查询)

使以下工作最简单和最通用的方法是什么(理想情况下没有精确的媒体查询): 显示项目彼此相邻 = 在单行上(当所有可用空间时) 当我们不能单行显示项目时,将项目显示在彼此之下 例子: 更长的屏幕 - 一切都适合单行: 较小的屏幕(没有空间用于单行显示),因此我们希望在彼此下方显示:
1回复

应用媒体查询时 Flex 项目消失

更新使用 Ezra Siton 答案中的链接,我将媒体查询显示更改为阻止,问题解决了! 在我的 html 代码中,我有一个带有两个孩子的父列 flexbox。 第二个孩子本身是另一个有四个 div 的 flexbox。 我在每个 div 中放置了一个画布,并且我将在其中显示一些图表。 子 fle
1回复

如何在NavBar的媒体查询中居中对齐/对齐菜单项?

在我的第一个网站上致力于苹果风格的简约风格。 这是我从几个来源学习到这里的问题后到目前为止开发的代码。 我的最后一个问题是在移动视图中对NavBar进行样式设置(媒体查询处于活动状态)。 现在,我相信在移动视图中,单击弹性图标时(它已解决了我的第一个问题)使所有菜单项保持水平展开,并且单击
4回复

如何在媒体查询中更改flex-box中元素的对齐方式?

我正在使用Bootstrap Flex-Box的项目中工作。 我已将链接附加到正在使用的布局上。 在除PC以外的其他设备上使用时,我需要将右侧的列向下更改。 这就是我想要的
1回复

CSS 媒体查询和 flex 方向

我正在学习 Udemy 上的 Traversy 课程,我在 HTML CSS 方面还不到一个月,所以是个新手。 所以在课程的一部分中,他让我们做一个网站,在最后几集中,他解释了如何让它对设备做出响应。 这是 html 上有问题的部分: 这就是我们在主 css 文件上所做的: 我们不得不将地
1回复

如何在媒体查询中重置居中

我有两个div围绕另一个div(id =“ about”)。 使用全尺寸浏览器时,它将显示水平和垂直居中的位置。 但是,当将窗口调整为较小的尺寸时,我希望两个div彼此叠置而不是并排放置。 对于我的尝试,我想基本上重置该包装器(大约)。 我的CSS: 如何重设居中位置,以便在
5回复

如何通过水平居中对齐和包装项目来控制 Flex 中的垂直和水平间距?

包装项目水平放置并居中对齐。 你将如何控制垂直和水平间距? 在这个例子中,我们希望项目之间有 16px 的水平空间和 8px 的垂直空间。 这是一个可能的解决方案: /* Solution */ .flex-wrapper { padding-top: 1px; } .fle
2回复

在不使用媒体查询的情况下将弹性项目包装后的全宽度

在这里使用flexbox。 在没有媒体查询的情况下按下它后,是否可以使重叠元素全宽? 请参阅附带的plunker: http ://plnkr.co/edit/mxACfJ2VR5yNgP9j8WJh? p= preview将预览窗口调整为小于425px的宽度。 第三个元素被推下来然后