阅读 1099

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

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

Flex 布局

实现效果展示及关联代码: tips.png

	.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容器的边缘也不会与其内容的边缘折叠。
image.png

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: [简单的应用 -- 元素垂直居中对齐] 微信截图_20201105163040.png

flex:

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

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

order:

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

image.png

Flex Layout 常见用于中后台界面布局,更灵活,同栅栏布局


瀑布流

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

CSS瀑布流

实现效果 image.png

Multi-column & break-inside

CSS制作瀑布流有些局限性,但相对来说是最简单的实现方式。 本次未使用Flex布局制作原因有2点:

  1. 使用Flex进行制作瀑布流时需要进行指定父级元素的高度,不能够很好的支持数据加载进来的菜单
  2. 在不更改原组件布局和不重新进行数据拆分的情况下,不能手动将原组件改成3列布局

image.png

  • Column-count : 3 将子元素设置为3列
  • Column-gap: 16px 设置子元素列间距为16px
  • Break-inside: avoid 避免元素内部出现换行符,不加的话会出现当只有一列时,原列会被分成3列呈现
  • Display:inline-grid    avoid在firefox下兼容适配处理办法
  • **@supports ** CSS Hack 处理低版本firefox

JS瀑布流

Masonry

Isotope

Vue瀑布流组件

Vue-waterfull-easy


参考链接

1.聊聊CSS世界中的margin-box张鑫旭
2.CSS3 -弹性盒概念 [MDN]
3.一劳永逸的搞定flex布局
4.CSS盒模型详解
5.几张动图让你看懂弹性盒模型如何工作
6.详解七种三栏布局技巧 -- 知乎
7.multi-column -- 腾讯云
8.纯CSS实现瀑布流
9.break-inside:avoid兼容firefox解决方案

文章分类
前端
文章标签