How to implement waterfall flow in CSS? Two ways to introduce

How to implement waterfall flow with CSS? The following article will introduce to you two ways to use CSS to implement waterfall flow. I hope it will be helpful to you!

Waterfall flow, also known as waterfall flow layout, is a popular website page layout method. It is often used when displaying multiple pictures on mobile phones. That is, multiple rows of equal-width elements are arranged, and subsequent elements are added to them in sequence, with equal width and unequal height. They are scaled according to the original proportion of the picture until the width reaches our requirements, and then placed in the specified position according to the rules.

So what are the implementation methods of waterfall flow layout?

columnMulti-line layout to implement waterfall flow

columnImplementing waterfall flow mainly relies on two attributes.

column-countattribute controls how many columns the screen is divided into.

column-gapattribute controls the distance between columns.

flexFlexible layout to achieve waterfall flow

##flexTo implement waterfall flow, you need to set the outermost element todisplay: flex, use elastic layout

flex-flow:column wrapto arrange it vertically and Line wrap

Set

height: 100vhThe height to fill the screen, or it can be set to the height in units ofpxto accommodate child elements.

The width of each column can be set with the

calcfunction, that is,width: calc(100%/3 - 20px). Divide it into equal-width3columns and subtract themargindistance twice on the left and right.

The display effect is as follows

Case code

Waterfall flow implementation code: https:/ /gitee.com/yunxii/css-demo/tree/master/waterfall

Original address: https://juejin.cn/post/7011333433318178846

Author: tangxd3

For more programming-related knowledge, please visit:

Programming Video! !

The above is the detailed content of How to implement waterfall flow in CSS? Two ways to introduce. For more information, please follow other related articles on the PHP Chinese website!