CSS Sharing: Flex Layout & CSS Waterfall Flow

JasonSubmara briefly shared some of the CSS techniques used in the project

Flex layout

Effect display and associated code:

	.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{// The last & on an odd line::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{// The first & on the even line::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'); }} // Interlaced key codeorder: sort position @iffloor($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; }}}}Copy the code

Code parsing:

• 【Scss Grammar 】# {}Interpolation statement,$iVariables,@for $i from 0 through 150Circular instruction,%integer
• useorderTo sort,
• use: : before and: afterPseudo-classes combinationclassProperty to control the display of arrows

CSS3 Flexible Box (or Flexbox) is a layout pattern for placing elements on a page so that elements behave predictably when the page layout must accommodate different screen sizes and different display devices. For many applications, the elastic box model provides an improvement over the block model because it does not use floats and the edges of the Flex container do not fold over the edges of its contents.

flex-direction:

• Row is the main axis horizontally and is arranged from left to right
• Row-reverse is the main axis horizontally, arranged from right to left
• Column is the longitudinal axis and is arranged from top to bottom
• Column-reverse is arranged vertically from bottom to top

justify-content:

• Flex-start starts to align in the starting direction of the spindle
• Flex-end is aligned in the opposite direction of the main axis
• **center ** is centered
• The spacing of space-around is the same, which can be understood as the same margin value of elements. [Conforming to BFC model, left and right spacing addition]
• Space-between ** ** two ends are aligned, that is, the first and last positions on the main axis (no line breaks/number of lines that can be placed) are aligned at the start and end points, respectively

flex:

Flex flex-basis & flex-grow & Flex -shrink

Flex: 2 and flex: 1/2 are arranged according to flex:1. If flex:1 is used as a reference, the width of flex:1 is used as a reference.

The waterfall flow

Waterfall flow is often used to display a series of variable width and height elements such as photo wall, which is divided into equal width waterfall flow and equal height waterfall flow

Multi-column & break-inside

CSS has some limitations for creating waterfall flows, but is relatively simple to implement. There are two reasons for not using Flex layout this time:

1. Using Flex to create waterfall streams requires specifying the height of the parent element, which does not support menus that load data in
2. You cannot manually change the original component layout to a 3-column layout without changing the original component layout and re-splitting the data

• Column-count: 3 sets the child element to three columns
• Column-gap: 16px Sets the Column spacing of the child element to 16px
• If there is only one column, the original column is split into three columns
• Display: Inline-grid avoid Compatible with Firefox
• **@supports ** CSS hacks handle lower versions of Firefox

Refer to the link

2.CSS3 – Elastic box concept [MDN] 3 5. Several giFs to show you how the elastic box model works. Detailed explanation of seven three-column layout skills — Zhihu 7. Multi-column — Tencent Cloud 8. 9. Break-inside: Avoid Compatible with Firefox solution