Shulou(Shulou.com)06/01 Report--

Xiaobian to share with you how to use css elastic sub-element attributes, I believe most people still do not know how to use, so share this article for your reference, I hope you have a lot of harvest after reading this article, let's go to understand it together!

Elasticity child element attribute

sort

syntax

order:

Analysis of each value:

: Use integer values to define the order of arrangement, with the lower value ranking first. It can be negative.

The order property sets the properties of the elastic child elements within the elastic container:

examples

.flex-item {

background-color: cornflowerblue;

width: 100px;

height: 100px;

margin: 10px;

}

.first {

-webkit-order: -1;

order: -1;

}

aligned

Set the "margin" value to "auto" value to automatically obtain the remaining space in the elastic container. Therefore, setting the vertical margin value to "auto" can make the elastic child element completely centered in both upper axis directions of the elastic container.

The following example sets margin-right: auto; on the first elastic child element. It places the remaining space to the right of the element:

examples

.flex-item {

background-color: cornflowerblue;

width: 75px;

height: 75px;

margin: 10px;

}

.flex-item:first-child {

margin-right: auto;

}

Perfect centering.

The following example will solve the problem of centering perfectly.

With elastic box, centering is very simple, just set margin: auto; can make elastic child elements completely centered in both upper axis directions:

examples

.flex-item {

background-color: cornflowerblue;

width: 75px;

height: 75px;

margin: auto;

}

The above is "how to use css elastic sub-element attributes" all the contents of this article, thank you for reading! I believe that everyone has a certain understanding, hope to share the content to help everyone, if you still want to learn more knowledge, welcome to pay attention to the industry information channel!

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.