flex布局中,元素等间距设置,包括第一个元素的左边,最后一个元素的右边,也等间距
项目中很多地方会用到等间距排放的场景,使用flex 布局可以很方便的实现
.fu{
display: flex;
ustify-content: space-between;
}
通过上面代码,可以实现子元素的等间距排放。但是第一个元素和末尾的元素,到左边和右边 不会等间距排放,可以通过伪元素来实现
.zi:before{
content: "";
display: block;
}
.zi:after{
content: "";
display: block;
}
这样就 可以实现等间距排放了。 在做下面的小程序中遇到了这个问题,记录下,希望能给你带来方便

flex布局中,元素等间距设置,包括第一个元素的左边,最后一个元素的右边,也等间距的更多相关文章
- flex布局中flex-grow与flex-shrink的计算方式
CSS 中的 Flex(弹性布局) 可以很灵活的控制网页的布局,其中决定 Flex 布局内项目宽度/高度的是三个属性: flex-basis, flex-grow, flex-shrink. flex ...
- flex布局中flex-basis|flex-grow|flex-shrink
flex布局中flex-basis|flex-grow|flex-shrink 整个才是正确的算法 flex-basis(基准值) 可以设置flex布局中容器的宽度,如果同时存在width属性,将把它 ...
- svg矢量图在flex布局中样式扭曲的问题
问题机型 小米5 华为nova 其他未知的可能机型 问题描述 利用flex 布局的一行中, 左一样式: -webkit-box-flex: 0; flex: 0 1 auto; 左二样式: -webk ...
- flex布局中transform出错
在flex布局下,若应用transform 的动画的子元素没有使用进行定位,则动画过程中,子元素将相对display:flex的元素进行static定位 动画结束后位置正常: 修复代码只需要posit ...
- flex布局中flex属性运用在随机发红包的算法上
flex布局是现在前端基本上都会运用的一种布局,基本上用到比较多的是父元素设置display:flex,两个子元素,一个设置固定宽度,另一个设置为flex:1(这里都指flex-direction为r ...
- 关于flex布局中的兼容性问题
这几天在做项目中用到了flex布局,但是在测试的过程中发现他的兼容性实在是太差了,仅仅用到水平和垂直居中的样式,没想到兼容性代码就写了好几行. display:flex; display:-webki ...
- flex布局中父容器属性部分演示效果
如图可见flex的属性分为父容器和子容器的属性共12个.关于这些属性具体代表什么意思,网上有很多教程的文章,自觉不能写得比别人更好,所以这里主要写了一些例子关于父容器属性效果的演示,希望可以帮助大家理 ...
- 微信小程序-flex布局中align-items和align-self区别
首先看看菜鸟教程中关于align-items和align-self的定义 align-items:align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式.(对 ...
- flex布局中flex-shrink的计算规则
下面代码来自MDN html部分: <p>the width of content is 500px, flex-basic of flex item is 120px.</p> ...
- flex布局中的主轴和侧轴的确定
1.主轴和侧轴是通过flex-direction确定的 如果flex-direction是row或者row-reverse,那么主轴就是justify-contain 如果flex-direction ...
随机推荐
- 选择排序C语言版本
算法思路,从头至尾扫描序列. 首先从第二个到最后,找出最小的一个元素,和第一个元素交换: 接着从第三个到最后,后面找出最小的一个元素,和第二个元素交换: 依次类推最终得到一个有序序列. void Se ...
- 基于 iframe 的微前端框架 —— 擎天
vivo 互联网前端团队- Jiang Zuohan 一.背景 VAPD是一款专为团队协作办公场景设计的项目管理工具,实践敏捷开发与持续交付,以「项目」为核心,融合需求.任务.缺陷等应用,使用敏捷迭代 ...
- Elasticsearch 数据建模指南
文章转载自:https://mp.weixin.qq.com/s/vSh6w3eL_oQvU1mxnxsArA 0.题记 我在做 Elasticsearch 相关咨询和培训过程中,发现大家普遍更关注实 ...
- Elastic: 如何在阿里云上构建Elastic集群
- SpringBoot项目的CI配置 # 安全变量
运行GitLab Runner容器 参考Run GitLab Runner in a container - Docker image installation and configuration 执 ...
- Linux常用基础指令
Linux常用指令 一.基础命令 whoami查看当前用户 pwd查看当前所在位置 ls 查看当前文件夹的内容 ls -l或ll显示详细内容 cd 绝对路径:从根目录开始的路径 cd / 文件夹 返回 ...
- 线性回归大结局(岭(Ridge)、 Lasso回归原理、公式推导),你想要的这里都有
本文已参与「新人创作礼」活动,一起开启掘金创作之路. 线性模型简介 所谓线性模型就是通过数据的线性组合来拟合一个数据,比如对于一个数据 \(X\) \[X = (x_1, x_2, x_3, ..., ...
- mac通过docker一键部署Jenkins
目录 mac通过docker一键部署Jenkins 一.前言 二.系统配置 三.安装步骤 Dockerhub查看镜像地址 1.一键安装 1.1.下载脚本 1.2.安装程序 1.2.1.安装程序详情 1 ...
- 谣言检测(DUCK)《DUCK: Rumour Detection on Social Media by Modelling User and Comment Propagation Networks》
论文信息 论文标题:DUCK: Rumour Detection on Social Media by Modelling User and Comment Propagation Networks论 ...
- CentOS 7.9 安装 Containerd-1.6.5
一.CentOS 7.9 安装 Containerd-1.6.5 地址 https://containerd.io/downloads 在安装containerd前,我们需要优先升级libseccom ...