Css3 Learning Theory-elastic Box Model

The elastic box model is used to determine the distribution of elements in the box and how to process the available space of the box. With him, we can easily create a mobile layout of the adaptive browser window or an elastic layout of the adaptive font size.

Its attributes include:

Box-align: defines the spatial allocation method of child elements in the vertical direction of the box.

Box-pack: defines the way in which sub-elements are allocated up to the water square in the box.

Box-direction: defines the layout sequence of the box.

Box-orient defines the layout orientation of the box.

Box-ordinal-group defines the location of the box layout.

Box-flex: defines the elastic space of the box.

Box-lines, space overflow management.

The following is a one-to-one explanation.

Box-orient defines the flow layout direction inside the box element. The display of the parent container is set to box or inline-box. The value can be horizontal: the box element displays its child element on a horizontal line from left to right; vertical: the box element displays its child element on a vertical line from top to bottom; inline-axis: the box element displays its child element along the inline axis; block-axis: the box element displays its child element along the block axis.

Box-direction: changes the flow sequence of elements in the box element. The value can be normal: normal order display; reverse: reverse display; inherit: inherits the display sequence of the upper-level elements.

Box-ordinal-group, you can set the specific position of each sub-element in the box. Its value is a natural number, starting from 1 and sorted according to the value size.

Box-flex: This attribute is absolutely excellent in the elastic layout. Its value is an integer or decimal number. When multiple boxes-flex are defined in the box, the browser will add the box-flex values of these child elements, and then calculate their respective proportions to allocate space, however, it can only be correctly parsed after the box has a fixed space size.

Box-pack, whose value can be start: displayed on the left of the box, surplus space displayed on the right; end: displayed on the right of the box, surplus space displayed on the left; center: average allocation; justify: the surplus space is evenly allocated among sub-elements.

Box-align, whose value can be start: sort by the upper edge of the box; end: sort by the lower edge of the box; center: half above, half below; baseline: all boxes are arranged along their baseline. The margin space can be displayed before and after it is available; stretch: the height of each child element is adjusted to the appropriate height of the box.

Box-lines, which can be set to single: all child elements are displayed in a single row or a single column; multiple: all child elements can be displayed in multiple columns or multiple rows. However, no browser supports this attribute currently.