CSS Box-flex Properties

Box-flex Properties (harmonious version)

#father {Display:box;}

#first_boy {box-flex:2;} #second_boy {box-flex:1;} #three_boy {box-flex:1;}

CSS Box-flex Properties (non-harmonious version)

#first_boy {box-flex:2;} #second_boy {box-flex:1;} #three_boy {width:50px;}

Box-orient, Box-direction, box-align, Box-pack usage

Box-orient
The box-orient is used to determine the direction of the child elements. Whether it is a row or a vertical walk. The optional values are:

Horizontal | Vertical | Inline-axis | Block-axis | Inherit

Box-direction

The box-direction is used to determine the order in which the child elements are arranged, and the optional values are:

normal | Reverse | Inherit

Box-align

both Box-align and box-pack determine how the remaining space inside the box is used. In the behavioral effect is to show "alignment",

Start | End | Center | Baseline | Stretch

Box-pack

Box-pack determines the use of the parent tag's horizontal left-over space, with optional values such as:

Start | End | Center | Justify

CSS Box-flex Properties