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

Editor to share with you how the layout of the flexbox elastic box in 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!

In the CSS3 elastic box model, we can use the box-flex attribute to define whether the child elements inside the elastic box have elastic space. If the child element has an elastic space, when the size of the elastic box (parent element) is enlarged or reduced, the size of the child element with the elastic space will also be enlarged or reduced. Whenever the elastic box has extra space, the sub-elements with the elastic space will also increase their size to fill the space.

Description:

The value of the box-flex property is an integer or decimal, not a negative number, and the default value is 0.

When the box contains multiple child elements that define the box-flex attribute, the browser will add the box-flex attribute values of these child elements and allocate the remaining space of the box according to the ratio of their respective values to the total value.

Note that the box-flex attribute is valid only if the width or height of the elastic box is determined. That is, you must first define the width or height attribute value for the parent element.

Use the elastic space setting so that the total width and height of the elements inside the elastic box are always equal to the width and height of the elastic box. However, the elastic space of the child element takes effect only if the elastic box has a certain width or height.

For example:

one

two

three

four

five

six

seven

eight

nine

ten

eleven

twelve

thirteen

fourteen

fifteen

sixteen

seventeen

eighteen

nineteen

twenty

twenty-one

twenty-two

twenty-three

twenty-four

twenty-five

twenty-six

twenty-seven

twenty-eight

twenty-nine

thirty

thirty-one

thirty-two

thirty-three

thirty-four

thirty-five

CSS3 box-flex attribute

Body

{

Display:-webkit-box

-webkit-box-orient:horizontal; / * defines the flow of elements within a box element from left to right * /

Width:200px

Height:150px

}

# box1

{

Background:red

-webkit-box-flex:1.0

}

# box2

{

Background:blue

-webkit-box-flex:2.0

}

# box3

{

Background:orange

-webkit-box-flex:1.0

}

The preview effect in the browser is as follows:

Analysis:

Here "box-orient:horizontal;" is used to define the horizontal arrangement of child elements inside the elastic box, and the width of the elastic box is specified as 200px. Then we just need to use the box-flex attribute to assign a value to each child element, and the browser will automatically calculate the proportion of each child element and automatically divide the width.

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

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.