项目中很多地方会用到等间距排放的场景,使用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. haodoop数据压缩

    压缩概述 压缩技术能够有效减少底层存储系统(HDFS)读写字节数.压缩提高了网络宽带和磁盘空间的效率.在运行MR程序时,I/O操作,网络数据传输,Shuffle和Merge要花大量的时间,尤其是数据规 ...

  2. 【BotR】CLR类型系统

    .NET运行时之书(Book of the Runtime,简称BotR)是一系列描述.NET运行时的文档,2007年左右在微软内部创建,最初目的是为了帮助其新员工快速上手.NET运行时:随着.NET ...

  3. centos7.2 安装MongoDB

    1.配置阿里云yum仓库 #vim /etc/yum.repos.d/mongodb-org-4.0.repo [mngodb-org] name=MongoDB Repository baseurl ...

  4. linux主机时间同步

    yum -y install ntpdate ntp && ntpdate cn.pool.ntp.org systemctl start ntpd.service && ...

  5. CentOS7配置nodejs环境

    # 安装 wget https://nodejs.org/dist/v12.18.3/node-v12.18.3-linux-x64.tar.xz tar xf node-v12.18.3-linux ...

  6. 从dva到vuex的使用方法()

    官网文档:https://vuex.vuejs.org/zh/ 辅助理解的博客:https://blog.csdn.net/m0_70477767/article/details/125155540 ...

  7. 用AR Engine手部骨骼跟踪能力实现虚拟手表试戴

    AR技术的落地应用,推动着电商领域的不断升级,通过增强现实为用户带来了虚拟与现实结合的AR购物体验.如AR试衣.AR试鞋.AR试妆等功能的出现让用户在手机上就能体验产品的佩戴效果,可以让用户更直观.更 ...

  8. PAT (Basic Level) Practice 1017 A除以B 分数 20

    本题要求计算 A/B,其中 A 是不超过 1000 位的正整数,B 是 1 位正整数.你需要输出商数 Q 和余数 R,使得 A=B×Q+R 成立. 输入格式: 输入在一行中依次给出 A 和 B,中间以 ...

  9. 批量查询hive库中所有表的count

    一.准备文件 mkdir /query_hive_table_count touch query_db_name_table touch query_table_result.txt 二.编辑文件 2 ...

  10. Vscode设置标签页多行显示

    1.设置标签页多行展示的方法 文件–>首选项–>设置 2.勾选多行显示按钮 3.显示效果