Project case CSS sharing: Flex layout &css waterfall flow

Time:2022-6-20

Project case CSS sharing: Flex layout &css waterfall flow

Just share some CSS techniques used in the project
JasonSubmara

Flex layout

Implementation effect display and associated code:
Project case CSS sharing: Flex layout &css waterfall flow

.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 {// last odd line
                        &::after {
                            content: '';
                            position: absolute;
                            bottom: 0;
                            left: 50%;
                            margin-left: -42px;
                            width: 16px;
                            height: 40px;
                            background: url('[email protected]/assets/images/tips-next-s.svg') no-repeat center;
                            background-size: 100%;
                        }
                        &.hasPower::after {
                            background-image: url('[email protected]/assets/images/tips-next-s-b.svg');
                        }
                    }@else if ($i + 1) /4% 2 = = 0 {// first even line
                        &::after {
                            content: '';
                            position: absolute;
                            bottom: 0;
                            left: 50%;
                            margin-left: -42px;
                            width: 16px;
                            height: 40px;
                            background: url('[email protected]/assets/images/tips-next-s.svg') no-repeat center;
                            background-size: 100%;
                        }
                        &.hasPower::after {
                            background-image: url('[email protected]/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('[email protected]/assets/images/tips-next-l.svg') no-repeat center;
                            background-size: 100%;
                            z-index: 1;
                        }
                        &.hasPower::after {
                            background-image: url('[email protected]/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('[email protected]/assets/images/tips-next-l.svg') no-repeat center;
                            background-size: 100%;
                            z-index: 1;
                            transform: rotate(180deg);
                        }
                        &.hasPower::after {
                            background-image: url('[email protected]/assets/images/tips-next-l-b.svg');
                        }
                    }
                    //Interlaced commutation key code order: sort position
                    @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;
                }
            }
        }
    }

Code parsing:

  • [SCSS syntax]#{}Interpolation statement$iVariables@for $i from 0 through 150Cycle command%Rounding
  • useorderSort,
  • use::before、::afterPseudo class associationclassProperty controls the picture of the arrow displayed

1.Talk about margin box in CSS world[Zhangxinxu[]](https://www.zhangxinxu.com/wo…
2.CSS3 – Elastic box concept[[MDN]](https://developer.mozilla.org…
3. fix the flex layout once and for all[Nuggetsosimly[]](https://juejin.im/post/58e3a5…
4. Detailed explanation of CSS box model[NuggetsDoraimi[er]](https://juejin.im/post/59ef72…
5.A fewGIFThe motion chart allows you to understand how the elastic box model works[Nuggets translation program[–linpu.li]](https://llp0574.github.io/201…
6.Explain in detailCSSSeven three column layout techniques[ZhihuLindongzhou[]](https://zhuanlan.zhihu.com/p/…
7.multi-column Tencent cloud
8.pureCSSImplement waterfall flow[Nuggets]
9.break-inside:avoidcompatiblefirefoxSolution[Stackoverflow[]](https://stackoverflow.com/que…