css3 - css flex 的问题
问题描述
如图，移动端导航用了flex均匀分布。但是视觉上不对。因为字数不相同。导致间隔不整齐。现在想调整css 能让字的间隔均匀分布。同时满足
移动端同行100%
注意下面红线
问题解答
回答1：如果只是改变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> <p class='list'><p name='item'>中 国</p><p name='item'>美 国</p><p name='item'>加拿大</p><p name='item'>澳大利亚</p><p name='item'>新西兰</p> </p></body></html>
另外，还有下面这种两边间隔相同的方式：
只需改变一句代码即可
flex-grow:1; // 替换 width: 20%;回答2：
美 国 //用
overflow: hidden 隐藏超出的文字。
利用letter-spacing来解决！letter-spacing 属性增加或减少字符间的空白（字符间距）。
类似于下面的效果：//
CSS样式：<style type='text/css'>.hotsearch dd{float: left;line-height: 24px;margin-right: 30px;overflow: hidden;text-align: center;width: 4em; /这个值是看最长能显示几个文字，如x，则为x em/}.hotsearch dd a{display:block;}.w2{letter-spacing:2em; /如果需要y个字两端对齐，则为(x-y)/(y-1),这里是（4-2）/(2-1)=2em /...
回答3：貌似css还没有这么强大的功能，而且每一个元素的字数不一样，计算出来的间距也会不一致。题主也可以试一试两端对齐这个方式
.nav{ display:flex; width:100%; height:50px; line-height: 50px; border-bottom:1px solid #ccc; font-size: 12px; text-align: center;}a{ display:block; padding:0 10px; box-sizing: border-box; flex:1; width:1%; text-align:justify; color:#000; }a:after{ overflow:hidden; display: inline-block; height:0; content:'200B';//利用伪元素来产生一个换行符，不然text-align:justify;属性不会生效 width: 100%;}.cur{ position: relative; color:#e22828;}.cur:before{ width: 100%; height:1px; content:''; position: absolute; left:0; bottom:-1px; border-bottom:1px solid #e22828; z-index: 100;}
有三个以上字体的分配的比较均匀
根据字数设置相应的flex-grow
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title></title> <style> .list {display: flex;flex-flow: row nowrap;height: 50px;background-color: #aaa; } .item {line-height: 50px;text-align: center;border: 1px solid #8cb;background-color: #ccc; } .item:nth-child(1) {flex-grow: 2; } .item:nth-child(2) {flex-grow: 2; } .item:nth-child(3) {flex-grow: 3; } .item:nth-child(4) {flex-grow: 4; } .item:nth-child(5) {flex-grow: 3; } </style></head><body> <p class='list'><p class='item'>中国</p><p class='item'>中国</p><p class='item'>大中国</p><p class='item'>大大中国</p><p class='item'>大中国</p> </p></body></html>
相关文章：
1. angular.js - angularjs ng-repeat 不能刷新2. 老师,你这两条斜杠的是怎么注释的?3. mac连接阿里云docker集群，已经卡了2天了，求问？4. PHP单例模式5. node.js - 来帮我捋一下node中fs模块watch实现原理6. docker 下面创建的IMAGE 他们的 ID 一样？这个是怎么回事？？？？7. docker镜像无法删除，请求解决办法。8. angular.js - 用angular2-cli打包项目之后，跳转路由刷新会报404的错误9. angular.js - angularJS最简单方法实现点击checkbox，button变亮10. css - 移动端 oppo 手机之 Border-radius
网公网安备