flex页面布局实现每个子元素(包括第一个元素和最后一个元素)间距相同

0
0
0

最近目中有一个需(其实是甲方提出来的一个细节),box父元素下面有一堆子元素,要让每一个子元素的间隙一样。之前是用下面的方法实现的,直接在父元素中用了justify-content:space-around,就像下面这样,

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box
        {
            width: 700px;
            background-color: #4d52ff;

            display: flex;
            flex-direction: row;
            justify-content:space-around;
        }
        .item
        {
            width: 100px;
            height: 100px;
        }
        .item1
        {
            background-color: #8d50cc;
        }
        .item2
        {
            background-color: #cc001b;
        }
        .item3
        {
            background-color: #cc001b;
        }
        .item4
        {
            background-color: #cc001b;
        }
        .item5
        {
            background-color: #05cc47;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="item item1">

    </div>
    <div class="item item2">

    </div>
    <div class="item item3">

    </div>
    <div class="item item4">

    </div>
    <div class="item item5">

    </div>
</div>
</body>
</html>

使用 justify-content:space-around; 的效果如下,

可以看出,两端的两个元素离父元素的边间隙明显小于中间每个元素之间的间距。

后来经过一翻思分析,实现了,效果如下:

交付给甲方的时候,甲方还不信,标尺一个一个量(MD,可恶的甲方,故意刁难我们,一万一草尼妈在心中奔腾)。

下面说一下实现方法。

【付费内容开始】

还有1506字, 为付费内容,付费后阅读全部

阅读全文 支付 ¥10
有效期 3 天
同意并确认支付
本文和文中图片版权归作者所有,如转载本文或使用本文中的图片需获得授权
广告
色情
抹黑攻击
反社会
内容水
其它
确定提交
条向作者的提问
发布提问
禁止发布违反法律法规的内容
动物 植物 无机物 上网的时候时刻面临着各种选择,...
街头指示牌和面包屑(设计导航)1. 网络导航101法则1-1...
第一章 知道原则-别让我思考1.可用性第一原则-设计者应该尽...
1、同等重要律已知有16种化学元素是植物生长所必需的。其中碳...
background-size: contain; 等比例放...
竞品分析可以让设计师快速了解自家产品中所处的位置。通过系统的...
本文中的方法是项目中实际应用的代码,经过测试绝对有效,不是网...
1.情感具有生理关联,通过生理特征展现,情绪比情感持续得更久...
第七章 web设计中的大爆炸理论完成网页的任务1.站点标识和...
在使用 position:absolute; 定位时,如果元...
新型多元素d型复混肥是一种氮、磷、钾含量≥25%、中微量元素...
东北水稻(粳稻)相对于南方水稻品种来说,具有耐寒、耐弱光的习...
黑糯玉米是一种保健果蔬玉米。黑糯玉米的走俏,不仅由于其黏香纯...
黑糯玉米是一种保健果蔬玉米。黑糯玉米的走俏,不仅由于其黏香纯...
真菌生物农药是当前生物农药主要发展方向之一,也是最安全、效果...
transform是设置元素的变形, transform-o...
由于所有Illustrator对象都是向量,因此从基本形状创...
镁作为植物所必须的中量元素,对植物代谢和生长发育具有很重要的...
相信很多英语学习者都有过这样的境遇:词汇书看完一遍,最后只记...
什么是文字文字:为了传递和记录语言而使用的符号表意文字:文字...
1.酶制剂成本应纳入配方成本计算 利用生物工程生产的植酸酶,...
绿色食品是无污染的安全、优质、营养类食品。合理使用肥料是生产...
果树品种很多,一生可分幼树期,结果初期,结果盛期、结果后期、...
读书笔记《点石成金》02一、我们实际上是如何使用WEB的1....
1、大写单词难读之谜人们阅读时是扫视的,只有很短的凝视时间去...
在36氪中看到一篇不错的文章——《设计复盘:拯救世界上最糟糕...
产品特点:本产品通过土壤和种薯传播的早、晚疫病和环腐病等细菌...
概述:混合工具在Illustrator中采用2个(或更多)形...
珍珠菜,别名珍珠花菜、白花蒿、香菜、角菜、扯根菜、虎尾等,是...
本站部分内容来自于网络和用户发布,如有侵犯您的权益,请即时告之,我们将第一时间处理.
服务邮箱 ydh@terlogic.com
京ICP备13047789号-7