项目中很多地方会用到等间距排放的场景,使用flex 布局可以很方便的实现

.fu{
display: flex;
ustify-content: space-between;
}

通过上面代码,可以实现子元素的等间距排放。但是第一个元素和末尾的元素,到左边和右边 不会等间距排放,可以通过伪元素来实现

    .zi:before{
content: "";
display: block;
}
.zi:after{
content: "";
display: block;
}

这样就 可以实现等间距排放了。 在做下面的小程序中遇到了这个问题,记录下,希望能给你带来方便

flex布局中,元素等间距设置,包括第一个元素的左边,最后一个元素的右边,也等间距的更多相关文章

  1. flex布局中flex-grow与flex-shrink的计算方式

    CSS 中的 Flex(弹性布局) 可以很灵活的控制网页的布局,其中决定 Flex 布局内项目宽度/高度的是三个属性: flex-basis, flex-grow, flex-shrink. flex ...

  2. flex布局中flex-basis|flex-grow|flex-shrink

    flex布局中flex-basis|flex-grow|flex-shrink 整个才是正确的算法 flex-basis(基准值) 可以设置flex布局中容器的宽度,如果同时存在width属性,将把它 ...

  3. svg矢量图在flex布局中样式扭曲的问题

    问题机型 小米5 华为nova 其他未知的可能机型 问题描述 利用flex 布局的一行中, 左一样式: -webkit-box-flex: 0; flex: 0 1 auto; 左二样式: -webk ...

  4. flex布局中transform出错

    在flex布局下,若应用transform 的动画的子元素没有使用进行定位,则动画过程中,子元素将相对display:flex的元素进行static定位 动画结束后位置正常: 修复代码只需要posit ...

  5. flex布局中flex属性运用在随机发红包的算法上

    flex布局是现在前端基本上都会运用的一种布局,基本上用到比较多的是父元素设置display:flex,两个子元素,一个设置固定宽度,另一个设置为flex:1(这里都指flex-direction为r ...

  6. 关于flex布局中的兼容性问题

    这几天在做项目中用到了flex布局,但是在测试的过程中发现他的兼容性实在是太差了,仅仅用到水平和垂直居中的样式,没想到兼容性代码就写了好几行. display:flex; display:-webki ...

  7. flex布局中父容器属性部分演示效果

    如图可见flex的属性分为父容器和子容器的属性共12个.关于这些属性具体代表什么意思,网上有很多教程的文章,自觉不能写得比别人更好,所以这里主要写了一些例子关于父容器属性效果的演示,希望可以帮助大家理 ...

  8. 微信小程序-flex布局中align-items和align-self区别

    首先看看菜鸟教程中关于align-items和align-self的定义 align-items:align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式.(对 ...

  9. flex布局中flex-shrink的计算规则

    下面代码来自MDN html部分: <p>the width of content is 500px, flex-basic of flex item is 120px.</p> ...

  10. flex布局中的主轴和侧轴的确定

    1.主轴和侧轴是通过flex-direction确定的 如果flex-direction是row或者row-reverse,那么主轴就是justify-contain 如果flex-direction ...

随机推荐

  1. 往harbor上传镜像

    下载镜像并给镜像打tag [root@hdss7-200 harbor]# docker pull nginx:1.7.9 [root@hdss7-200 harbor]# docker images ...

  2. 工程课Linux第一节笔记

    上课笔记 文件系统结构 /根目录 /bin/ 存放系统命令,普通用户与root都可以执行 /etc/ 配置文件保存位置 /lib/ 系统调用的函数库保存位置 /var/ 目录用于存储动态数据,例如缓存 ...

  3. SkyWalking 6.x 的架构图

    可以看到主要由四部分组成: Agent(也叫Probe):代理或者探针,集成在被监测的应用中(SDK形式或者动态注入),采集应用的数据发送给后端(OAP). UI:自带的Web页面. OAP:后端,接 ...

  4. 使用logstash同步Mysql数据表到ES的一点感悟

    针对单独一个数据表而言,大致可以分如下两种情况: 1.该数据表中有一个根据当前时间戳更新的字段,此时监控的是这个时间戳字段 具体可以看这个文章:https://www.cnblogs.com/sand ...

  5. MongoDB $type 操作符

    描述 $type操作符是基于BSON类型来检索集合中匹配的数据类型,并返回结果. MongoDB 中可以使用的类型如下表所示: 类型 数字 备注 Double 1 String 2 Object 3 ...

  6. C++面向对象编程之成员模板、模板特化、偏特化和模板模板参数

    1.成员模板 理解起来就是类是模板类,他里面的成员函数又是个模板函数 上图例子:用派生类构造父类 2.模板特化 就是在类模板泛化后写特化的类,在template<>里不绑定类型,而在类后面 ...

  7. GitLab + Jenkins + Harbor 工具链快速落地指南

    目录 一.今天想干啥? 二.今天干点啥? 三.今天怎么干? 3.1.常规打法 3.2.不走寻常路 四.开干吧! 4.1.工具链部署 4.2.网络配置 4.3.验证工具链部署结果 4.3.1.GitLa ...

  8. 从源码分析 MGR 的新主选举算法

    MGR 的新主选举算法,在节点版本一致的情况下,其实也挺简单的. 首先比较权重,权重越高,选为新主的优先级越高. 如果权重一致,则会进一步比较节点的 server_uuid.server_uuid 越 ...

  9. Tableau Server 常用命令

    Tableau Server 常用命令 1> 停止tableau server服务 tabadmin stop 2> 恢复tableau server数据 tabadmin restore ...

  10. 超好用的截图软件Snipaste(包含安装包)、如何设置Snipaste开机自启

    文章目录 1.设置开机自动启动 2.基本使用 链接: https://pan.baidu.com/s/1oR2qkOZl5-etPxr7kWip7Q 提取码:8888 1.设置开机自动启动 2.基本使 ...