CCS3 Telescopic box model (latest)

The CSS3 telescopic box is a great way to implement the development of a Web site that uses responsive layouts. It enables the horizontal arrangement of block-level elements without the use of float (float) and positioning (position). And you can assign the width of the parent element as a proportion of the child elements, the gossip is not much direct look at the example.

1, to implement the telescopic box mode must be set to the parent element:Display:flex (old version Display:box need to add the corresponding browser prefix ), to achieve the display mode of the telescopic box.

2. Assign proportions by setting the Flex-grow attribute of the child element

1 <DivID= "Parent">2     <DivID= "Child1">01</Div>3     <DivID= "Child2">02</Div>4     <DivID= "Child3">03</Div>5 </Div>

1 #parent {

2 width:1000px;3 Height:200px;4 Display:Flex; /* child elements arranged horizontally */5}6 #parent Div{7 font-size:100px;8 Line-height:200px;9 text-align:Center;Ten} One #child1{ A width:200px; - Background-color:Orange; -} the #child2{ - Flex-grow:1; /* Assign scale factor */ - Background-color:Pink; -} + #child3{ - Flex-grow:3; /* Assign scale factor */
Background-color:Green; 
+ }

Analysis:the width of the parent is 1000px,child1 width is 200px, so child2 + child3 = 1000-200 = 800px, because Child2 and child3 are set flex-grow:1 and Flex-grow:3; So the width of child2 is 1/(1+3) = 200px,child3 width is 800 * 3/(1+3).

Note: 1, if the child element has a fixed width, the other child elements are proportionally allocated the remaining width, namely: 1000-200 = 800px;

2, the total number of Flex-grow attribute value of the sum of each child element is: 1 + 3 = 4, the width of each element is Flex-grow/(sum of Flex-grow) namely: 1/(1+3), 3/(1+3);

CCS3 Telescopic box model (latest)