How to use the justify-content attribute in css

This article is about how to use justify-content in CSS. Xiaobian thinks it is quite practical, so share it with everyone for reference. Let's follow Xiaobian and have a look.

The justify-content attribute determines the alignment and distribution of horizontal sub-items.

2. Applied to elastic containers, align the elastic terms along the main axis of the elastic container. This occurs after the elastic length and automatic margins have been determined.

examples

.box{display:-webkit-flex; display:flex; width:400px; height:100px; margin:0; padding:0; border-radius:5px; list-style:none; background-color:#eee;}.box li{margin:5px; padding:10px; border-radius:5px; background:#aaa; text-align:center;}#box{-webkit-justify-content:flex-start;justify-content: flex-start;}#box2{-webkit-justify-content:flex-end;justify-content: flex-end;}#box3{-webkit-justify-content:center;justify-content:center;}#box4{-webkit-justify-content:space-between;justify-content:space-between;}#box5{-webkit-justify-content: space-around;justify-content: space-around;} Thanks for reading! About "how to use justify-content attribute in css" this article is shared here, I hope the above content can be of some help to everyone, so that everyone can learn more knowledge, if you think the article is good, you can share it to let more people see it!