Shulou(Shulou.com)05/31 Report--

This article introduces how CSS flex layout is, the content is very detailed, interested friends can refer to it, I hope it can help you.

The justify-content attribute is applied to elastic containers, aligning elastic items along the elastic container's main axis.

This occurs after the elastic length and automatic margins have been determined. It is used to allocate excess space when it exists and also affects alignment of items when content overflow occurs.

Note: There are two basic terms for elastic layouts: main axis and cross axis, which we can generally think of as row and column orientation on the screen, respectively (but strictly speaking, this relates to write mode and elastic flow orientation).

Then main-start and main-end can be regarded as the left and right sides of the elastic container respectively.

Justify-content syntax is as follows: justify-content: flex-start| flex-end | center | space-between | space-around

The parameters are described as follows: flex-start elastic items fill immediately next to the first line. This is the default value. The main-start edge of the first elastic term is placed on the main-start edge of the row, and subsequent elastic terms are placed flush in turn. flex-end elastic items fill next to the end of the line. The main-end margin edge of the first elastic term is placed on the main-end edge of the row, and subsequent elastic terms are placed flush in turn. Center elastic item centered next to fill. (If the remaining free space is negative, the elastic item will overflow in both directions simultaneously.) Space-between elastic items are evenly distributed across the row. If the residual space is negative or there is only one elastic term, then this value is equivalent to flex-start. Otherwise, the outer margin of the first elastic term is aligned with the main-start edge of the row, and the outer margin of the last elastic term is aligned with the main-end edge of the row, and then the remaining elastic terms are distributed on the row with equal intervals between adjacent items. Space-around elastic items are evenly distributed on the row, leaving half the space between them. If the residual space is negative or there is only one elastic term, the value is equivalent to center. Otherwise, the elastic items are distributed along the row at equal intervals (say 20px), with half the spacing between the first and second edges and the elastic container (1/2*20px=10px).

About CSS flex layout is how to share here, I hope the above content can be of some help to everyone, you can learn more knowledge. If you think the article is good, you can share it so that more people can see it.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.