ColumnsColumn column of the Chinese meaning is the meaning of the column, in the HTML, the role is broken down, a piece of content of the same proportion evenly divided into a piece of the column, like the content of the newspaper, an article on a piece of content divided into several columns as shown, its properties are
1.columns: Columns-width Column-count; The width and number of columns of each column; example: columns:200px 3; (Ie10 above browser support, Firefox, Google support to add compatibility prefix)-webkit-columns:-moz-columns:-ms-columns:
2.column-gap: Width normal; (Spacing width between columns and columns, custom or default Normal,normal, the width of the gap between columns is equal to the width of the font size.) ) Example: column-gap:20px; (default is normal);(ie10 above support, Firefox Google need to add a compatible prefix)
3.column-rule: Column-rule-width column-rule-style Column-rule-color; used to set the gap between columns and columns, the width, style, and color of the cable of the property value; Example: column-rule:5px solid Red, (Ie10 above IE all support, Firefox Google need to prefix) there are three properties, not much, compatibility is not very good 4.column-span: whether it is a cross-column, it is generally used to set an element in the column to display the way across all columns, default is None, not across the column display, The Across columns display is the all property value; column-span:all; (Compatibility is not good, Ie10 browser support, Firefox does not support.) ) 5.column-fill:auto balance; The height of the column is set by default to auto, the height of the column is adaptive to the content, balance the height of the specified column is the highest one of the columns. (This method does not use much, understand the main) 6.column-break-before (after): The property value has auto (by default, does not force or prohibit the creation of a new column before the specified block-level element), always (line breaks before the specified block-level element to produce a new column), avoid ( Prohibit the creation of new columns before the specified block-level elements) with less, understand the main, (Ie10 above IE browser support, Firefox does not support. ）
Telescopic box (elastic box model) (old version)Example:<style> #box {display:-webkit-box; display:-moz-box; display:-ms-box; display:box; width:600px; height:180px; margin:0; padding:0; List-style:none; Box-orient:horizontal;-webkit-box-orient:horizontal; }.li1{-weblit-box-flex:1;-moz-box-flex:1;-ms-box-flex:1; background: #666666;}. Li2{-webkit-box-flex:2;-moz-box-flex:2;-ms-box-flex:2; background: #999999;}. Li3{-webkit-box-flex:3;-moz-box-flex:3;-ms-box-flex:3; background: #cccccc;} </style><ul id= "box" > <li class= "li1" >1</li> <li class= "Li2" >2</li> <li class= "Li3" >3</li></ul> Note: Be sure to turn on the elastic box model, add the parent element
Display:box;Property. Display:-webkit-box; Display:-moz-box; Display:-ms-box; Set the arrangement of the elastic box model child elements
box-orient: horizontal (horizontal from left to right) vertical (vertically arranged from top to bottom) the way the box elements are scaled
Box-pack: Start (align from Start, left, or top) center (center aligned) end (from end alignment, right-aligned, or bottom-aligned) just Ify (justify) sets the way the child elements of the telescopic box are aligned
box-align: Start (from the start position to it) Center (center aligned) end (from the end position to it) baseline (baseline alignment) stretch (adaptive parent element size)
Box-flex: Sets the proportional box-flex:1;-webkit-box-flex:1;-moz-box-flex:1 of the child element to the parent element space;
Box-flex-group: Do not understand
Box-ordinal-group: Sets the display order integer value of the box child elements to determine the display order
box-direction: Sets whether the order of child elements of a telescopic box object reverses normal (default, child elements in normal order) reverse (reverses the order in which the telescopic box objects are arranged)
Box-lines: Sets whether child elements of the Telescopic box object can be wrapped in a newline; Singel: The child elements of the Telescopic box object are displayed only on one line multiple: The child elements of the telescopic box object that are outside the parent element are wrapped in a newline display.
Telescopic box (flexible box model) (new)Flex needs to add display:flex to the box; The properties open the elastic box model. Display:-webkit-flex;flex-grow: Allocates the remaining space of the parent element proportionally. Flex-shrink: Shrinks the space to remove the parent element proportionally. Flex-basis: Set Elastic box Scaling reference Length (length value to define width) percent auto (no specific) content (auto-calculate width based on contents) Flex-flow: Set the Flex box model Sub Arrangement of elements flex-direction (define elastic box element arrangement direction) Flex-wrap (Controls whether the Flex container is single row or multiple lines), Flex-direction: Sets the arrangement of elasticity and child elements. row: Horizontal from left to right Row-revers: On its way to row vs. & nbsp Column: Vertical from top to bottom column-revers: In the opposite way as column. Flex-wrap: Set whether the container is single line or multiline Nowrap:flex container is single line, subkeys may overflow WRA The P:flex container is multiline, the child overflow distribution is placed on a new row, and the child is internally marked with a line break Wrap-reverse: Reverse wrap arrangement align-content: The child element in the elastic box Way flex-start: flex-end: &N Bsp center: Space-between: space-around: stretch: Default align-items: Defines the side axes of child elements in the container (vertical axis) in the direction of the way Flex-start: flex-end: center: baseline: stretch: Default value Ali Gn-self: Defines the alignment of Flex subkeys independently on the side axis (vertical axis), for Flex subkeys Auto: &N Bsp Flex-start: flex-end: center: &NBS P baseline: Stretchjustify-content: Set the way the elastic box elements are aligned in the horizontal direction &NBSP ; flex-start: flex-end: center: &nbs P space-between: Space-around;;order: Define the sorting method numerically, with small values at the front and negative values.
CSS3 Elastic Scaling and use
