How to achieve evenly distributed layout in css

This article mainly shows you "how to achieve equal distribution of css", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to achieve equal distribution of css" this article.

Equally divided layout

The classical equipartition layout is composed of multiple columns, which is characterized by equal width of each column and fixed and equal height of each column. Overall, it is also the simplest classic layout, and because each column is equal in width, it is easy to find a suitable way to deal with it.

.one {background-color: # f66;} .two {background-color: # 66f;} .three {background-color: # f90;} .four {background-color: # 09f;}

Float + width

Each column width is declared as an equal percentage, and if there are four columns, width:25% is declared. N column uses the formula 100 / n to find the final percentage width, remember to keep 2 decimal places, lazy people can also use width:calc (100% / n) to calculate automatically.

.average-layout {width: 400px; height: 400px; div {float: left; width: 25%; height: 100%;}}

Flex

It is more concise to implement using flex. After the node declares display:flex, the height of all the child nodes in the generated FFC container is equal, because the align-items of the container is stretch by default, and all child nodes will occupy the full height of the entire container. Each column declares the flex:1 adaptive width.

. average-layout {display: flex; width: 400px; height: 400px; div {flex: 1;}} these are all the contents of the article "how to divide the layout equally in css". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!