CSS3 Elastic Box Model Property collation

Display:box is the CSS3 new box model property, which can solve our layout by n multi-structure, CSS implementation. One of the classic layout applications is the vertical, horizontal, and proportional distribution of the layout.

Set parent container style Display:box;

. Father{margin:0 Auto;width:1000px;Height:200px;Border:1px solid Red;/*set how the parent element is displayed*/Display:-webkit-box;/*Chrome, Opera, Safari*/Display:-moz-box;/*Firefox*/Display:Box; }

1.box-flex Property (Lets sub-containers Divide the width of the parent container by a certain rule)

Partitioning rules: Sub-container a width = (parent container width-width of the child container of the fixed width) * Sum of sub-container a scale/sub-container proportions

. Son1{width:200px;background:Yellow; }. Son2{Height:100px;/*Box-flex*/-webkit-box-flex:2;-moz-box-flex:2;Box-flex:2;background:Red; }. Son3{-webkit-box-flex:3;-moz-box-flex:3;Box-flex:3;background:Green; }

2.box-orient Property (used to determine Parent Container lining the arrangement of containers: horizontal: horizontal（默认）， Vertical: vertical，继承：inherit )

. Father{margin:0 Auto;width:1000px;Height:200px;Border:1px solid Red;/*set how the parent element is displayed*/Display:-webkit-box;/*Chrome, Opera, Safari*/Display:-moz-box;/*Firefox*/Display:Box;/*box-orient*/-webkit-box-orient:Vertical;-moz-box-orient:Vertical;box-orient:Vertical; }

3.box-direction Property (Determine in the parent container sub-container ordering: Document order: Normal, Reverse: reverse, Inheritance: Inherit)

. Father{width:100%;Height:100px;/*set how the parent element is displayed*/Display:-webkit-box;Display:-moz-box;Display:Box;-moz-box-direction:Reverse;/*Firefox*/-webkit-box-direction:Reverse;/*Safari, Opera, and Chrome support*/box-direction:Reverse; }

4.box-align(indicates the vertical alignment of the face container in the parent container: top-aligned: Start, bottom-aligned: End, center-aligned: center, stretched to parent container ascended: stretch)

Box-pack(indicates the horizontal alignment of the face container in the parent container: top-aligned: Start, bottom-aligned: End, center-aligned: center, horizontally divides the parent container width ( Firefox and Opera temporarily not supported, only Safari, Chrome support ): Justify)

. Father{margin:0 Auto;width:1000px;Height:200px;Border:1px solid Red;/*set how the parent element is displayed*/Display:-webkit-box;/*Chrome, Opera, Safari*/Display:-moz-box;/*Firefox*/Display:Box;/*Box-pack*/-webkit-box-pack:Center;-moz-box-pack:Center;Box-pack:Center;/*box-align*/-webkit-box-align:Center;-moz-box-align:Center;box-align:Center; }

CSS Layout Properties display Property Value :

None: Hides the object. Unlike the hidden value of the visibility property, it does not retain its physical space for objects that are hidden

inline: Specifies that the object is an inline element.

BLOCK: Specifies that the object is a block element.

List-item: Specifies that the object is a list item.

Inline-block: Specifies that the object is an inline block element. (CSS2)

Table: Specifies the object as a table at the block element level. Similar to HTML tags <table> (CSS2)

inline-table: Specifies the object as an inline element-level table. Similar to HTML tags <table> (CSS2)

table-caption: Specifies the object as the table caption. Similar to HTML tags <caption> (CSS2)

Table-cell: Specifies the object as a table cell. Similar to HTML tags <td> (CSS2)

Table-row: Specifies the object as the table row. Similar to HTML tags <tr> (CSS2)

Table-row-group: Specifies the object as a table row group. Similar to HTML tags <tbody> (CSS2)

table-column: Specifies the object as a table column. Similar to HTML tags <col> (CSS2)

Table-column-group: Specifies that the object is displayed as a table column group. Similar to HTML tags <colgroup> (CSS2)

Table-header-group: Specifies the object as a table header group. Similar to HTML tags <thead> (CSS2)

Table-footer-group: Specifies the object as the table footer group. Similar to HTML tags <tfoot> (CSS2)

run-in: Determines whether an object is an inline object or a block-level object, depending on the context. (CSS3)

box: Displays the object as an elastic telescopic box. (the oldest version of the Telescopic box)(CSS3)

Inline-box: Displays the object as an inline block-level elastic expansion box. (the oldest version of the Telescopic box)(CSS3)

Flexbox: Displays the object as an elastic telescopic box. (Telescopic box transition version)(CSS3)

Inline-flexbox: Displays the object as an inline block-level elastic expansion box. (Telescopic box transition version)(CSS3)

Flex: Displays the object as an elastic telescopic box. (Latest version of Telescopic box)(CSS3)

Inline-flex: Displays the object as an inline block-level elastic expansion box. (Latest version of Telescopic box)(CSS3)

CSS3 Elastic Box Model Property collation