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

仅对项目中所使用到的部分CSS技巧做一次简单的分享 JasonSubmara

Flex 布局

实现效果展示及关联代码：

	.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;
				}
			}
		}
	}