Display:-webkit-box, display-webkit-box

Display:-webkit-box, display-webkit-box

Flexbox adds a new value for the display attribute (that isBoxValue), flexbox has many attributes and records some common attributes:

• Style used for the parent element:

• Style used for child elements:

• Case 1:

 

1 <style> 2*{3 margin: 0; 4 padding: 0; 5} 6. parent {7 width: 500px; 8 height: 200px; 9 display:-webkit-box; 10-webkit-box-orient: horizontal; /* although the default arrangement is horizontal, add this attribute */11} 12 for the sake of differentiation. child-one {13 background: lightblue; 14-webkit-box-flex: 1; 15} 16. child-two {17 background: lightgray; 18-webkit-box-flex: 2; 19} 20. child-three {21 background: lightgreen; 22-webkit-box-flex: 3; 23} 24 </style> 25 26 <div> 27 <div class = "parent"> 28 <div class = "child-one"> 1 </div> 29 <div class = "child-two"> 2 </div> 30 <div class = "child-three"> 3 </div> 31 </div> 32 </div>

 

Note: If the. parent is also horizontally centered, you can reuse the box attribute again. child-one accounts for 1/6, child-two accounts for 2/6, and child-three accounts for 3/6;

• Case 2:

<Style> * {margin: 0; padding: 0 ;}. parent {width: 500px; height: 200px; display:-webkit-box;-webkit-box-orient: horizontal;/* although the default arrangement is horizontal, but for the sake of differentiation, add this attribute */}. child-one {background: lightblue;-webkit-box-flex: 1 ;}. child-two {background: lightgray;-webkit-box-flex: 2 ;}. child-three {background: lightgreen;/* fixed height and margin added */width: 150px; margin: 0 15px;} </style> <div>Case 3:
 
<Style> * {margin: 0; padding: 0 ;}. parent {width: 400px; height: 600px; display:-webkit-box;-webkit-box-orient: vertical;/* vertical arrangement */}. child-one {background: lightblue;-webkit-box-flex: 1 ;}. child-two {background: lightgray;-webkit-box-flex: 2 ;}. child-three {background: lightgreen;/* with a fixed height and margin */height: 200px; margin: 15px 0 ;}</style> <div>Case 4
 
<Style> * {margin: 0; padding: 0 ;}. parent {width: 400px; height: 200px; display:-webkit-box;-webkit-box-orient: horizontal;-webkit-box-align: center; /* horizontal match box-align */}. child-one {background: lightblue;-webkit-box-flex: 1; height: 100px ;}. child-two {background: lightgray;-webkit-box-flex: 2; height: 110px ;}. child-three {background: lightgreen;-webkit-box-flex: 3; height: 120px ;}</style> <div>