css3 - css flex 的问题
本文介绍了css3 - css flex 的问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
如图，移动端导航用了flex均匀分布。但是视觉上不对。因为字数不相同。导致间隔不整齐。
现在想调整css 能让字的间隔均匀分布。同时满足
移动端同行100%
注意下面红线
解决方案
如果只是改变css，我的认知中好像并没有适合你目前这种文字间距均匀的方法；不过可以通过一些样式调整达到视觉上的舒适，如下图：
添加一个浅色的背景；
给每个内容之间加1像素间隔符…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Super8_share</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<meta content="telephone=no" name="format-detection">
<style>
.list {
display: flex;
flex-flow: row nowrap;
height: 50px;
}
.item {
width: 20%;
line-height: 50px;
text-align: center;
border-right: 1px solid #fff;
background-color: #efefef;
border-bottom: 2px solid #f00;
overflow: hidden;
}
.item:last-child{border-right: none;}
</style>
</head>
<body>
<div class="list">
<div class="item" name="item">中 国</div>
<div class="item" name="item">美 国</div>
<div class="item" name="item">加拿大</div>
<div class="item" name="item">澳大利亚</div>
<div class="item" name="item">新西兰</div>
</div>
</body>
</html>另外，还有下面这种两边间隔相同的方式：
只需改变一句代码即可
flex-grow:1; // 替换 width: 20%;这篇关于css3 - css flex 的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
