项目中很多地方会用到等间距排放的场景,使用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. 解决nuxt/koa架构初始项目运行报错问题

    今天在学习运用vue的nuxt/koa框架,初始化项目之后,在执行 $> npm run dev 时报错,错误详细信息如下: 点击查看报错的详细内容 > npm run dev Debug ...

  2. 2021年3月-第01阶段-Linux基础-Linux系统的启动流程

    Linux系统的启动流程 理解Linux操作系统启动流程,能有助于后期在企业中更好的维护Linux服务器,能快速定位系统问题,进而解决问题. 上图为Linux操作系统启动流程 1.加载BIOS 计算机 ...

  3. 树莓派学习笔记 (1) - 安装&初始设置

    1. 设备 Raspberry Pi 4B MicorSD card (tf 卡) Windows 10 电脑 Android 手机 2. 烧录系统 利用官网提供的 Raspberry Pi Imag ...

  4. Call to undefined function think\captcha\imagettftext()

    sudo apt install libjpeg62-turbo-dev libfreetype6-dev -y su -c "docker-php-ext-configure gd --e ...

  5. Elasticsearch: 使用URI Search

    在Elasticsearch中,我们可以使用_search终端进行搜索.这个在我之前的文章 "开始使用Elasticsearch (2)" 中有很多的描述.针对这种搜索,我们可以使 ...

  6. 授予用户/用户组访问 Kubernetes 的一个名称空间

    转载地址:https://www.kuboard.cn/learning/k8s-advanced/sec/rbac/auth-namespace.html 前提条件 已安装 Kuboard v3,版 ...

  7. 3.使用nexus3配置maven私有仓库

    配置之前,我们先来看看系统默认创建的都有哪些 其中圈起来的都是系统原有的,用不到,就全删掉,重新创建. 1,创建blob存储 2,创建hosted类型的maven 点击 Repository下面的 R ...

  8. overflow 隐藏滚动条样式

    在使用overflow,属性值为auto或者scroll时,很多时候会有多余的滚动条在旁边,这时就非常影响观瞻,所以我们有时需要将滚动条隐藏掉. 今天就说两种我用到的隐藏滚动条的方法,如果有其他解决方 ...

  9. 「国产系统」Tubian 0.2,兼容Windows和Android的GNU/Linux系统!

    0.3版已发布:https://www.cnblogs.com/tubentubentu/p/16733005.html Sourceforge.net主页(提供下载):https://sourcef ...

  10. Java并发编程 | 从进程、线程到并发问题实例解决

    计划写几篇文章讲述下Java并发编程,帮助一些初学者成体系的理解并发编程并实际使用,而不只是碎片化的了解一些Synchronized.ReentrantLock等技术点.在讲述的过程中,也想融入一些相 ...