This article for everyone to continue to share the CSS3 elastic box Model development notes the second, before a and for everyone introduced the CSS3 elastic box model of the relevant introduction, click to view: CSS3 Elastic Box Model Development notes (a)
Box-flex Property
The Box-flex property gives you the flexibility to control the display space of child elements in a box. Note that the display space includes the width and height of the child element, not just the width of the column in which the child element is located, but also the area occupied by the child element in the box. This property is important in resilient layouts, and it addresses the drawbacks of traditional design in which a percentage is used to define elastic layouts. Basic syntax for the Box-flex property:
Box-flex:<number>
Value Description:
The <number> attribute value is an integer or decimal. When a box contains multiple child elements that define the Box-flex attribute, the browser will add the Box-flex attribute values of the child elements and allocate the remaining space of the box based on their respective values as a percentage of the total value. Note that the Box-flex property can be parsed correctly only after the box has the determined amount of space. In the design, it is more prudent to define a specific width or Height property value for the box.
Actual combat experience: Adaptive column width design
In the traditional web design, if you want to divide a column into three columns, it is relatively simple to set the width of the three child elements to 33.3%. This does not completely fill the width of the parent element, and when the parent element is large enough, the user sees an unfilled empty area. However, if you set a fixed-width value for a child element, the flex layout becomes more complex. If you use the Box-flex attribute, the problem will be solved.
HTML code:
<body>CSS3 Code:
/* This is a three-column layout of the page, where the width of the left column is fixed, and the middle and right column width is elastic */<style> body{ margin:0; padding:0; Text-align:center; } h1,h2{margin:2px;} #box { margin:auto; Text-align:left; width:1002px; Overflow:hidden; } /* Define box element cartridge display and set sub-element horizontal layout */#box { display:box; Display:-moz-box; Display:-webkit-box; Box-orient:horizontal; -moz-box-orient:horizontal; -webkit-box-orient:horizontal; } /* Defines the width of the left column of the box as fixed display */#box1 {width:201px;} #box2, #box3 { border:1px solid #CCC; margin:2px; } /* Defines the width of the middle column in the box as the 2/3*/of the box's remaining space #box2 { box-flex:4; -moz-box-flex:4; -webkit-box-flex:4; } /* Defines the width of the middle column in the box as the 1/3*/of the box's remaining space #box3 { box-flex:2; -moz-box-flex:2; -webkit-box-flex:2; } #box2 p, #box3 p{ display:inline; } </style>Demo Effect:
Implementation and allocation of elastic space
By default, a child element is not resilient, it can be as wide as possible so that its contents are visible and there will be no overflow. If you want to change its size, you can use the width and Height properties, or you can use properties such as min-height,min-width,max-height,max-width to limit the size.
When the Box-flex property is at least greater than 0 o'clock, it becomes resilient. When a child element is elastic, it can be changed in the following way:
1. Use attributes such as width,height,min-height,min-width,max-height,max-width to define dimensions.
2. Use the size of the box to limit the elastic dimensions of the child elements.
3. Limit the elastic dimensions of the element by means of all the space in the box.
If the child element does not have a declared size, its size will depend entirely on the size of the box, that is, the size of the child element equals the size of the box multiplied by the percentage of its Box-flex property value in the sum of the Box-flex property values of all child elements. The formula is expressed as follows:
Dimension of child element = size of Box * child element's Box-flex attribute value/Box-flex property value of all child elements and
If one or more child elements declare a specific size, the size will be counted into it, and the rest of the elastic boxes will share the rest of the available space according to the above principles.
Due to the size of the internal image support, resulting in the child element space is always greater than the box space, there will be a resolution exception.
Box-flex property affects the layout of child elements
HTML code:
<body>Half the space between the middle and the right
CSS3 Code:
#box2 { box-flex:2; -moz-box-flex:2; -webkit-box-flex:2; Background: #CCF; } #box3 { box-flex:2; -moz-box-flex:2; -webkit-box-flex:2; Background: #FC0; }Demo Effect:
1/5 of the free space in the column, the right column occupies 4/5 free space
CSS3 Code:
#box2 { box-flex:0.5; -moz-box-flex:0.5; -webkit-box-flex:0.5; Background: #CCF; } #box3 { box-flex:2; -moz-box-flex:2; -webkit-box-flex:2; Background: #FC0; }Demo Effect:
Middle elastic display, occupy all free space, fixed large right column
CSS3 Code:
#box2 { box-flex:0.5; -moz-box-flex:0.5; -webkit-box-flex:0.5; Background: #CCF; } #box3 { width:196px; Background:url (images/web3_03.gif) no-repeat; }Demo Effect:
The middle column loses its elasticity (when set to 0 or copy), the contraction appears as a line, and the right column automatically moves left
CSS code:
#box2 { box-flex:0; -moz-box-flex:0; -webkit-box-flex:0; Background: #CCF; } #box3 { width:196px; Background:url (images/web3_03.gif) no-repeat; }Demo Effect:
The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
