How to realize prominent layout in css

Editor to share with you how to achieve a prominent layout of css, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Highlight the layout

Prominence layout refers to the space-occupying layout in which the nodes in the container are arranged in the same direction and there is a prominent node in a certain direction. The layout may be a mouthful to describe, just look at the following effect, this is a horizontal list, nodes are arranged from left to right, and the rightmost node is particularly prominent. This is the characteristic of the prominent layout, the prominent nodes can be in any position of the prominent layout, up and down, up and down, left, left, right, and right.

Here the ingenious use of margin-*:auto to achieve a prominent layout. It is believed that margin:0 auto will be used for horizontal centered block elements of fixed width.

In the same principle, when a node declares margin-*:auto, the browser automatically calculates the remaining space and assigns the value to the node. When using this technique, it must be based on flex layout.

Alibaba Tencent Baidu Jingdong Ant Netease.highlight-layout {display: flex; align-items: center; padding: 0 10px; width: 600px; height: 60px; background-color: # 3c9; li {padding: 010px; height: 40px; background-color: # 3c9; line-height: 40px; font-size: 16px; color: # fff } & .left li {&: not (: first-child) {margin-left: 10px;} &: last-child {margin-left: auto;}} & .right li {&: not (: last-child) {margin-right: 10px } &: first-child {margin-right: auto;}} & .top {flex-direction: column; width: 120px; height: 400px; li {&: not (: first-child) {margin-top: 10px } &: last-child {margin-top: auto;}} & .bottom {flex-direction: column; width: 120px; height: 400px; li {&: not (: last-child) {margin-bottom: 10px } &: first-child {margin-bottom: auto;}

There is another trick here, that is: the ingenious use of not () and: first-child and: last-child. This combination allows nodes in special locations to directly reduce the problem of attribute coverage, which is not only easy to read but also can be forced.

: not (: first-child): excluding the first node, other nodes use certain styles

: not (: last-child): excluding tail nodes, other nodes use certain styles

The above is all the content of the article "how to achieve prominent layout 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!