css flex 的问题

水墨寒
  • 1.1k

图片描述
如图,移动端导航用了flex均匀分布。但是视觉上不对。因为字数不相同。导致间隔不整齐。
现在想调整css 能让字的间隔均匀分布。同时满足

  1. 移动端同行100%

  2. 注意下面红线

回复
阅读 3.7k
4 个回答
aileliu
  • 279
✓ 已被采纳

如果只是改变css,我的认知中好像并没有适合你目前这种文字间距均匀的方法;不过可以通过一些样式调整达到视觉上的舒适,如下图:

  1. 添加一个浅色的背景;

  2. 给每个内容之间加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">中&nbsp;&nbsp;国</div>
        <div class="item"  name="item">美&nbsp;&nbsp;国</div>
        <div class="item"  name="item">加拿大</div>
        <div class="item"  name="item">澳大利亚</div>
        <div class="item"  name="item">新西兰</div>
    </div>
</body>
</html>

另外,还有下面这种两边间隔相同的方式:

  1. 只需改变一句代码即可
    图片描述

flex-grow:1; // 替换 width: 20%;
Liberxue
  • 654
  1. 美     国 //用&nbsp;&nbsp;&nbsp;&nbsp;

  2. overflow: hidden 隐藏超出的文字。

  3. 利用letter-spacing来解决!
    letter-spacing 属性增加或减少字符间的空白(字符间距)。

类似于下面的效果:
//
98c1b7bd001ce52f5f970d680881bffc.jpg

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 /
...

貌似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>
    <div class="list">
        <div class="item">中国</div>
        <div class="item">中国</div>
        <div class="item">大中国</div>
        <div class="item">大大中国</div>
        <div class="item">大中国</div>
    </div>
</body>
</html>
宣传栏