2 列 web 到 1 列移动与动态高度框
Posted
技术标签:
【中文标题】2 列 web 到 1 列移动与动态高度框【英文标题】：2 column web to 1 column mobile with dynamic height boxes 【发布时间】：2018-03-26 09:09:10 【问题描述】：如何在支持 IE11 和所有主流浏览器的同时对这个图表进行 CSS 处理？
Flexbox 似乎不支持动态高度。
lg 视口是否必须有左/右列，而 xs 视口必须没有列？
Codepen
<div class="container">
<div id="box1" class="box">box1</div>`
<div id="box2" class="box">box2</div>`
<div id="box3" class="box">box3</div>`
<div id="box4" class="box">box4</div>`
<div id="box5" class="box">box5</div>`
</div>
【问题讨论】：
有很多方法可以做到这一点。如果你想为自己创建一个网格系统，你可以在需要的地方使用 CSS Media Queries 和 flexbox 与 polyfill 的组合。或者您可以使用任何广泛可用的网格系统框架，例如 Simple Grid Bootstrap Bulma 或 Foundation 等等 不确定您所说的 flexbox 不支持“动态高度”是什么意思。以我的经验，你可以通过使用flex-directionflex-wrapjustify-content和align-items来哄骗几乎所有的网格布局。
所有行都从相同的垂直位置开始。我需要每列中的项目从最后一个项目结束的地方开始。在 codepen 中你可以看到 box2 和 box4 之间的空间
刚刚注意到移动视图中的 DIV 顺序发生了变化。一种可能的解决方案是渲染两种布局并使用媒体查询有选择地隐藏其中一种。
使用 Flexbox 和动态高度无法做到这一点，要么添加脚本，要么使用 CSS Grid 或 float。
【参考方案1】：
正如我在评论中提到的，您可以使用媒体查询根据当前屏幕尺寸渲染两者并仅显示一种布局。
Hack 实施示例：
<html>
<head>
<style>
.container
width: 100%;
.row
display: flex;
flex-direction: row;
justify-content: flex-start;
width: 100%;
.column
display: flex;
flex-direction: column;
justify-content: flex-start;
.item
width: 100%;
border: solid 1px #dadada;
border-radius: 16px;
display: flex;
justify-content: center;
align-items: center;
@media screen and (max-width: 600px)
.desktop-only
display: none;
.column
width: 100%;
@media screen and (min-width: 601px)
.mobile-only
display: none;
.column
width: 50%;
.item-1
height: 200px;
.item-2
height: 400px;
.item-3
height: 250px;
.item-4
height: 300px;
.item-5
height: 350px;
</style>
</head>
<body>
<div class="desktop-only">
<div class="container">
<div class="row">
<div class="item item-1">1</div>
</div>
<div class="row">
<div class="column">
<div class="item item-3">3</div>
<div class="item item-5">5</div>
</div>
<div class="column">
<div class="item item-2">2</div>
<div class="item item-4">4</div>
</div>
</div>
</div>
</div>
<div class="mobile-only">
<div class="container">
<div class="column">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
<div class="item item-5">5</div>
</div>
</div>
</div>
</body>
</html>断点设置为 600 像素。更改窗口宽度上下 600px 以查看布局“变化”
【讨论】：
以上是关于2 列 web 到 1 列移动与动态高度框的主要内容，如果未能解决你的问题，请参考以下文章