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

This article mainly introduces the relevant knowledge of "the method of CSS3 elastic box layout". The editor shows you the operation process through the actual case. The operation method is simple, fast and practical. I hope this article "the method of CSS3 elastic box layout" can help you solve the problem.

I think elastic box layout (Flexible Box Layout) is one of the most powerful features in css3. When developers are still having a headache about box content adaptation, elastic box layout provides adaptive support for box content. But it is immature. For example, WebKit kernel browsers have adjusted its implementation and usage in recent versions.

For the WebKit kernel browser, a simple example is shown in the following code:

HTML5

Body {

Display:-webkit-box; / * set body to elastic box * /

-webkit-box-orient: horizontal; / * set the elastic box to horizontal direction * /

Height: 100px

}

# box1 {

-webkit-box-flex: 2; / * the width occupied by box1 is 2 copies * /

Background: blue

}

# box2 {

-webkit-box-flex: 1; / * the width occupied by box2 is 1 * /

Background: green

}

# box3 {

-webkit-box-flex: 1; / * the width occupied by box3 is 1 * /

Background: olive

}

Div {

Border: 1px black solid

Margin-left: 10px

}

As you drag to resize the browser, you can see that the widths of the box1, box2, and box3 boxes change as the width of the body changes, but all maintain the defined 2 ∶ 1 ∶ 1 ratio.

This is the end of the introduction to "the method of CSS3 elastic box layout". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.