flex水平平分布局

2020-01-04 08:16:12

效果

 

HTML

    <ul class="box">
        <li class="b-title">标题一</li>
        <li class="b-title">标题二</li>
        <li class="b-title">标题三</li>
    </ul>

 

CSS

复制代码

        .box {
            display: flex;
        }

        .b-title {
            flex: 1;
            border: 1px solid red;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
        }


  • 精彩推荐

  • 2020-11-11 15:05:39

    nuxt如何在其它js文件中使用store

    在新建的js文件中想用store里面的数据，比如token想在封装的axios里面，请求头里面去使用，亦或者通过app的JS接口获取token并存储在store里面。我们都知道如何在vue中如何使用。

  • 2020-11-12 14:01:46

    使用postMessage来实现父子通信跨域

    1.子向父，子postMessage,父监听message; 2.父向子，父postMessage,子监听message; 3.测试发现，子向父postMessage的时候，源可以写为‘*’，父向子postMessage的时候，源需要写成子的源，(也就是子页面的协议+主机号+端口) 测试代码部分：

  • 2020-11-12 14:24:39

    Object.entries()

    Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 for...in 循环遍历该对象时返回的顺序一致（区别在于 for-in 循环还会枚举原型链中的属性）