Home > Developer > Web Develop
Box-flex PropertyBy reading and learning books "CSS3 Combat" summary
"CSS3 Combat"/Shing Lum.-Beijing Machinery Industry Press 2011.5
box-flexProperty 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. box-flexbasic syntax for a property:
box-flex:<number>
Value Description:<number>The property value is an integer or a decimal number. 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 specific width or attribute values for the box height .
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><H1><img src="Images/web3_13.gif" /></H1><div id="box"> <!--left column -- <div id="Box1"><img src="Images/web3_01.gif" /></div> <!--Middle column -- <div id="Box2"> <h2><img src="Images/web3_02.gif" /></H2> <div><img src="Images/web3_04.gif" /></div> <div><img src="Images/web3_05.gif" /></div> <div><img src="Images/web3_06.gif" /></div> <div><img src="Images/web3_07.gif" /></div> </div> <!--right column -- <div id="Box3"> <h2><img src="Images/web3_12.gif" /></H2> <div><img src="Images/web3_08.gif" /></div> <div><img src="Images/web3_09.gif" /></div> <div><img src="Images/web3_10.gif" /></div> <div><img src="Images/web3_11.gif" /></div> </div></div></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 child 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 Div,#box3 Div{ 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:
Use attributes such as width,height,min-height,min-width,max-height,max-width to define dimensions.
Use the size of the box to limit the elastic dimensions of the child elements.
Limit the elastic dimensions of the element by using 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:
子元素的尺寸=盒子的尺寸*子元素的box-flex属性值/所有子元素的box-flex属性值的和
?? 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><H1><img src="Images/web3_13.gif" /></H1><div id="box"> <!--left column -- <div id="Box1"><img src="Images/web3_01.gif" /></div> <!--Middle column -- <div id="Box2"></div> <!--right column -- <div id="Box3"></div> </div></body>#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:
#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:
#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:
#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:
"CSS3 Practical" notes--Elastic box Model (ii)
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
