关于css:项目案例CSS分享Flex布局Css瀑布流

仅对我的项目中所应用到的局部 CSS 技巧做一次简略的分享
JasonSubmara

实现成果展现及关联代码：

    .tips-process {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        overflow: hidden;
        li {
     position: relative;
            width: 25%;
            text-align: center;
            padding-bottom: 40px;
            padding-right: 80px;
            box-sizing: border-box;
            @for $i from 0 through 150 {&:nth-child(#{$i + 1}) {@if ($i + 1)/4 % 2 == 1 { // 奇数行最初一个
                        &::after {
                            content: '';
                            position: absolute;
                            bottom: 0;
                            left: 50%;
                            margin-left: -42px;
                            width: 16px;
                            height: 40px;
                            background: url('~@/assets/images/tips-next-s.svg') no-repeat center;
                            background-size: 100%;
                        }
                        &.hasPower::after {background-image: url('~@/assets/images/tips-next-s-b.svg');
                        }
                    } @else if ($i + 1)/4 % 2 == 0 { // 偶数行第一个
                        &::after {
                            content: '';
                            position: absolute;
                            bottom: 0;
                            left: 50%;
                            margin-left: -42px;
                            width: 16px;
                            height: 40px;
                            background: url('~@/assets/images/tips-next-s.svg') no-repeat center;
                            background-size: 100%;
                        }
                        &.hasPower::after {background-image: url('~@/assets/images/tips-next-s-b.svg');
                        }
                    } @else if ($i + 1)/4 <= 1 and ($i + 1)/4 > 0 or ($i + 1)/4 > 2 and ($i + 1)/4 <= 3 {
                        &::after {
                            content: '';
                            position: absolute;
                            right: 0;
                            top: 50%;
                            margin-top: -22px;
                            width: 80px;
                            height: 16px;
                            background: url('~@/assets/images/tips-next-l.svg') no-repeat center;
                            background-size: 100%;
                            z-index: 1;
                        }
                        &.hasPower::after {background-image: url('~@/assets/images/tips-next-l-b.svg');
                        }
                    } @else if ($i + 1)/4 <= 2 and ($i + 1)/4 > 1 or ($i + 1)/4 > 3 and ($i + 1)/4 <= 4 {
                        &::after {
                            content: '';
                            position: absolute;
                            left: -80px;
                            top: 50%;
                            margin-top: -22px;
                            width: 80px;
                            height: 16px;
                            background: url('~@/assets/images/tips-next-l.svg') no-repeat center;
                            background-size: 100%;
                            z-index: 1;
                            transform: rotate(180deg);
                        }
                        &.hasPower::after {background-image: url('~@/assets/images/tips-next-l-b.svg');
                        }
                    }
                    // 隔行换向要害代码 order: 排序地位
                    @if floor($i / 4) % 2 == 0 {order: #{$i};
                    } @else {order: #{$i + (2 - ($i % 4) * 2) + 1};
                    }
                }
            }
            a {
                position: relative;
                display: block;
                height: 64px;
                line-height: 64px;
                color: #757f8a;
                overflow: visible;
                font-size: 16px;
                background: linear-gradient(-135deg, transparent 10px, #e6eaf0 0);
                drop-shadow: 10px 10px 0 #adb7c2;
                filter: drop-shadow(10px 10px 0 #adb7c2)
            }
            &.hasPower a {
                color: #fff;
                background: linear-gradient(-135deg, transparent 10px, #3290ff 0);
                drop-shadow: 10px 10px 0 #addcff;
                filter: drop-shadow(10px 10px 0 #addcff);
            }
            em {
                position: absolute;
                z-index: 1;
                left: 12px;
                top: 12px;
                display: block;
                width: 12px;
                height: 12px;
                border-radius: 50%;
                background: rgba($color: #000000, $alpha: 0.2);
            }
            img {
                position: absolute;
                display: none;
                width: 30px;
                top: -20px;
                left: 3px;
            }
            &.hasPower img {display: block;}

            &:nth-child(13) {flex: 1;}
            &:nth-child(14) {
                margin-left: 50%;
                // flex: 1;
                &::after {content: none;}
            }
        }
    }

代码解析：

【Scss 语法】#{} 插值语句、$i 变量、@for $i from 0 through 150 循环指令、% 取整

应用 order 进行排序，

应用::before、::after 伪类联合class 属性管制显示箭头的图片

CSS3 弹性盒子(Flexible Box 或 Flexbox)，是一种用于在页面上安排元素的布局模式，使得当页面布局必须适应不同的屏幕尺寸和不同的显示设施时，元素可预测地运行。对于许多应用程序，弹性盒子模型提供了对块模型的改良，因为它不应用浮动，flex 容器的边缘也不会与其内容的边缘折叠。

flex-direction:

row 横向为主轴，从左至右排列
row-reverse 横向为主轴，从右至左排列
column 纵向为主轴，从上至下排列
column-reverse 纵向为主轴，从下至上排列

flex-wrap:

wrap 排列不下时换行
nowrap 排列不下时不换行
wrap-reverse 排列不下时反向换行，延穿插轴反向程序持续进行排列，类麻将游戏中布局

justify-content:

flex-start 延主轴起始方向开始排列
flex-end 延主轴反向开始排列
center 居中排列
space-around 间距一样排列，即可了解为，元素 margin 值雷同。【合乎 BFC 模型，左右间距相加】
space-between 两端对齐，即主轴上 (不换行 / 换行可搁置个数) 起始第一个和最初一个别离地位在起始点和开端点对齐

align-items:

属性值了解与 justify-content 一样，地位方向为穿插轴
eg: [简略的利用 — 元素垂直居中对齐]

flex:

flex ☞ flex-basis & flex-grow & flex-shrink

当存在 flex-basis 为具体值的时候优先以该数值宽度为准进行排列，flex:1 则是将剩下的局部均分，flex: 2 和 flex: 1/ 2 均以 flex:1 为基准参照进行排列布局。

order:

order 可用于批改主轴上子元素的排列方向，数值越小越考前，案例中要害代码亦是通过循环赋值来达到这一亩地

Flex Layout 常见用于中后盾界面布局，更灵便，同栅栏布局

瀑布流通常利用于照片墙等展现一系列不定宽高的元素，分为等宽瀑布流和等高瀑布流，以等宽瀑布流的利用居多

实现成果

Multi-column & break-inside

CSS 制作瀑布流有些局限性，但相对来说是最简略的实现形式。
本次未应用 Flex 布局制作起因有 2 点：

应用 Flex 进行制作瀑布流时须要进行指定父级元素的高度，不可能很好的反对数据加载进来的菜单

在不更改原组件布局和不从新进行数据拆分的状况下，不能手动将原组件改成 3 列布局

Column-count : 3 将子元素设置为 3 列
Column-gap: 16px 设置子元素列间距为 16px
Break-inside: avoid 防止元素外部呈现换行符，不加的话会呈现当只有一列时，原列会被分成 3 列出现
Display:inline-grid avoid 在 firefox 下兼容适配解决方法
@supports CSS Hack 解决低版本 firefox

1. 聊聊 CSS 世界中的 margin-box   [张鑫旭[]](https://www.zhangxinxu.com/wo…
2.CSS3 – 弹性盒概念   [[MDN]](https://developer.mozilla.org…
3. 一劳永逸的搞定 flex 布局   [掘金 -osimly[]](https://juejin.im/post/58e3a5…
4.CSS 盒模型详解   [掘金 - 哆来咪[er]](https://juejin.im/post/59ef72…
5. 几张 GIF 动图让你看懂弹性盒模型如何工作 [掘金翻译打算[–linpu.li]](https://llp0574.github.io/201…
6. 详解 CSS 七种三栏布局技巧 [知乎 - 林东洲[]](https://zhuanlan.zhihu.com/p/…
7.multi-column 腾讯云
8. 纯 CSS 实现瀑布流[掘金]
9.break-inside:avoid 兼容 firefox 解决方案[Stackoverflow[]](https://stackoverflow.com/que…

关于css:项目案例CSS分享Flex布局Css瀑布流

我的项目案例 CSS 分享：Flex 布局 &Css 瀑布流

Flex 布局

基本概念 | 罕用属性

flex-direction:

flex-wrap:

justify-content:

align-items:

flex:

order:

瀑布流

CSS 瀑布流

Multi-column & break-inside

JS 瀑布流

Vue 瀑布流组件

参考链接

Just My Socks（注册教程内含优惠码）

关于css:项目案例CSS分享Flex布局Css瀑布流

我的项目案例 CSS 分享：Flex 布局 &Css 瀑布流

Flex 布局

基本概念 | 罕用属性

flex-direction:

flex-wrap:

justify-content:

align-items:

flex:

order:

瀑布流

CSS 瀑布流

Multi-column & break-inside

JS 瀑布流

Vue 瀑布流组件

参考链接

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）