代码之家 › 专栏 › 技术社区 › dom_ahdigital

flexbox是否可以实现这种响应性布局?

css html

dom_ahdigital · 技术社区 · 5 年前

我需要在CSS中实现以下布局:

我一直在尝试flexbox,但无法使容器“C”在平板电脑宽度上正确显示。我可以使用CSS对列进行重新排序 order 但“C”的宽度跨越了页面的整个宽度,但需要限制为与容器“A”相同的宽度。

我在这里设置了一支空白启动笔,因为我无法发布我的项目: https://codepen.io/ahdigital/pen/GRqpQRL?editors=1100

我的问题是,这在flexbox中是可能的,还是应该使用另一种CSS方法?(试图避开JS)。

1 回复 | 直到 5 年前

Quentin 5 年前

不

通过使用嵌套的FlexBox,如果两个框垂直对齐,则可以实现类似的布局( A 和 C 在本例中),平板电脑布局中的所有组件都是相邻的,但这里的情况并非如此。

使用网格来代替布局。

对于媒体查询,你可以将Flexbox用于台式机,将Grid用于平板电脑,两者都不能用于移动设备。

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

8 月前

Mass · 如何在Tailwind CSS v4中创建配置

8 月前

magenta placenta · 将css变量合并为一个变量

8 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

8 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

8 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

9 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

9 月前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

9 月前

Luckkks · 过渡色工作不正常

9 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

9 月前