这几天做移动项目，期间用了盒模型(flex)布局。在计算机上由于是用谷歌和火狐浏览器来调试，所以没发现什么问题，但是手机UC打开后，我整个人都不好了，盒模型布局全乱了。后来在网上查了一下关于盒模型的资料，发现大部分都说移动端不支持flex属性，更有甚者说只能换种布局方式。看到这些，我的内心是崩溃的，毕竟做了这么久的项目不能说改就改的。但是最终我还是找到了解决的办法，接下来跟大家分享一下我是如何解决这个问题的。下面是一个Demo，上代码先：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Demo for flex on uc</title>
<style type="text/css">
html,
body {
padding: 0;
margin: 0;
}
.demo1 {
background-color: yellow;
text-align: center;
height: 80px;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
/* for uc */
display: -webkit-box;
-webkit-box-align: center;
}
.demo1>div {
background-color: green;
margin: 2px;
-webkit-flex: 1;
flex: 1;
/* for uc */
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-flex: 1;
}
.demo2 {
background-color: yellow;
width: 80px;
height: 200px;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
align-items: center;
/* for uc */
display: -webkit-box;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
-webkit-box-align: center;
}
.demo2>div {
background-color: green;
width: 40px;
margin: 2px;
-webkit-flex: 1;
flex: 1;
/* for uc */
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-flex: 1;
}
</style>
</head>
<body>
<h2>左右排列，上下居中</h2>
<div class="demo1">
<div>flex</div>
<div>flex</div>
<div>flex</div>
<div>flex</div>
<div>flex</div>
</div>
<h2>上下排列，左右居中</h2>
<div class="demo2">
<div>flex</div>
<div>flex</div>
<div>flex</div>
<div>flex</div>
<div>flex</div>
</div>
</body>
</html>
代码已经有了，接下来读者可以亲自体验一下UC浏览的效果咯！是不是已经是你们想要的效果了？
不过，这里还有一个问题，就是demo1里的div的宽度会随文字的多少改变，不是我们想要的等分布局效果。其实，有一个最简单的解决办法，就是在demo1下的div里添加一个属性：(width：0%；)，即
.demo1>div {
background-color: green;
margin: 2px;
width: 0%;/*初始宽度都设为0%，这样就能保证每个宽度都一样了*/
-webkit-flex: 1;
flex: 1;
/* for uc */
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-flex: 1;
}
然后你可以尝试将某个div里的文字增多，看看效果如何！
好了，这个问题就分享到这里了， 希望能给读者带来小小的帮助，也希望大神多多指导！！！
时间： 2024-08-01 10:33:34