项目案例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;
}
}
}
}代码解析：
- 【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 常见用于中后台界面布局，更灵活，同栅栏布局
瀑布流
瀑布流通常应用于照片墙等展示一系列不定宽高的元素，分为等宽瀑布流和等高瀑布流，以等宽瀑布流的应用居多
CSS瀑布流
实现效果
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
JS瀑布流
Vue瀑布流组件
参考链接
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...