One of the methods for developing CSS3 elastic box model

This article mainly for you to share the CSS3 elastic box Model development notes, compatibility, different properties of the introduction, interested in small partners can refer to

Elastic box Model (Flexible box Moudle), which determines how elements are distributed in the box and the available space for processing boxes. This is similar to XUL (the user interaction language of the Firefox browser), and the same box model is used in other languages. such as Xaml,gladexml and so on. The elastic box model makes it easy to create a flexible layout that adapts to the flow layout of the browser window or the adaptive font size.

Compatibility: Elastic box Model specification was published in 2009 by the standardization Organization, and there is no mainstream browser to support it, but browsers using the WebKit and Mozilla rendering engines have customized a set of private properties to support the elastic box model.

Browsers that use the WebKit rendering engine primarily include Safari and Chrome, which supports private attributes prefixed with-webkit.

Browsers for the Mozilla rendering engine mainly include the Firefox browser, which supports private attributes prefixed with-moz.

Related properties:

Box-align: Defines how the child elements are spatially distributed in the vertical direction of the box
Box-direction: Define the order in which the boxes are displayed
Box-flex: Defining the adaptive dimensions of child elements within a box
Box-flex-group: Defining a group of adaptive child elements
Box-lines: Define sub-element columns display
Box-ordinal-group: Defines where child elements are displayed inside the box
Box-orient: Defines the axis of the box division
Box-pack: Defines how the child elements are spatially distributed horizontally within the box

Box-orient Property

This property can be used to define the flow layout direction inside the box element. When using the elastic box model, you first need to set the display property of the parent container to box or Inline-box.
Grammar:

Box-orient:horizontal | Vertail | Inline-axis | Block-axis | Inherit

A simple description of the value:

Horizontal: The box element displays its child elements from left to right on a horizontal line.

Vertail: The box element displays its child elements from top to bottom on a vertical line.

Inline-axis: The box element displays its child elements along the inline axis.

Block-axis: The box element displays its child elements along the block axis.

Combat experience: Design multi-column layouts

HTML code:

<p id= "box" >      <p id= "box0" ></p> <p id=      "Sub-box" >          <p id= "box1" ></p>          <p id= "Box2" ></p>          <p id=" Box3 "></p>      < /p>  </p>

CSS3 Code:

<style type= "Text/css" >   body{/* Document Style */      margin:0;padding:0px;/* Clear margin */      text-align:center;/* Document Center Alignment *      /background: #170843;   }   #box {       margin:auto;/* Document Center Align */      text-align:center;       width:975px;   }   /* Customize the width of each column */  #box1 {width:185px;}   #box2 {width:601px;}   #box3 {width:189px;}   /* The box showing the custom sub-containing box shows the elements that contain the horizontal flow */  #sub-box{       display:-moz-box;       Display:-webkit-box;       Display:box;       Box-orient:horizontal;       -moz-box-orient:horizontal;       -webkit-box-orient:horizontal;     }   </style>

Demo Effect:

Box-direction Property

The Box-direction property can change the flow order of inner elements within a box element, the basic syntax for this property:

Box-direction:normal | Reverse | Inherit

A simple description of the value:

Normal: Regular display order, that is, if the Box-origent property value of the box element is horizontal, its containing child elements are shown in left-to-right order, that is, the left side of each child element is always close to the right of the previous child element If the Box-origent property value of the box element is set to vertical, its contained child elements are displayed in order from top to bottom.

Reverse: The display order of the child elements contained in the box will be the opposite of normal.

Inherit: Inherits the order in which ancestor elements are displayed.

Combat Experience: Reverse layout page (based on the above case):

CSS3 Code:

<style>   body{       margin:0;padding:0px;       Text-align:center;       Background: #170843;   }   #box {       margin:auto;       Text-align:center;       width:975px;   }   #box1 {width:185px;}   #box2 {width:601px;}   #box3 {width:189px;}   #sub-box{       Display:-moz-box;       Display:-webkit-box;       Display:box;       Box-orient:horizontal;       -moz-box-orient:horizontal;       -webkit-box-orient:horizontal;         Box-direction:reverse;       -moz-box-direction:reverse;       -webkit-box-direction:reverse;   }   </style>

Demo Effect:

Box-ordinal-group Property

The Box-direction property can change the flow order of elements inside the box, while the Box-ordinal-group property can set the specific display position of each child element in the box, with the following syntax:

Box-ordinal-group:<integer>

Value Description:

The property value is a natural number, starting with 1, to set the position symbol for the child element. The distribution of child elements is arranged from small to large based on this attribute value. By default, child elements are arranged according to the position of the element.
Note: If you do not specify a child element of the Box-ordinal-group property value, its ordinal is 1 by default, and the elements with the same ordinal number are arranged in the order in which they are loaded in the document.

Combat Experience: Vertical page layout

HTML code:

<p id= "box" >      <p id= "box1" ></p> <p id=      "Box2" > </p>      <p id= "Box3" ></ p>      <p id= "box4" ></p>  </p>

CSS3 Code:

<style type= "Text/css" > body {margin:0;       padding:0;       Text-align:center;   Background: #d9bfe8;       } #box {Margin:auto;       Text-align:left;   width:988px;       }/* Defines box-shaped display and inside box element vertical Display */#box {display:-moz-box;       Display:-webkit-box;       Display:box;       box-orient:vertical;       -moz-box-orient:vertical;   -webkit-box-orient:vertical;      }/* Adjust the display order of each plate by using the flexible box model based on the real needs of the Web content */#box1 {/* Set the first element to appear in the second position */-moz-box-ordinal-group:2;/* compatible Mozilla Gecko engine */      -webkit-box-ordinal-group:2;/* compatible WebKit engine */box-ordinal-group:2;/* Standard usage */} #box2 {/* Setting the second element appears in the third position */ -moz-box-ordinal-group:3;/* compatible with Mozilla Gecko Engine */-webkit-box-ordinal-group:3;/* compatible WebKit engine */Box-ordinal-group : 3;/* Standard usage */} #box3 {/* Setting the third element is displayed in the first position */-moz-box-ordinal-group:1;/* compatible with Mozilla Gecko engine */-webkit-box-ordina l-group:1;/* compatible WebKit engine */box-ordinal-group:1;/* Standard usage */} #box4 {/* Setting fourth element appears in fourth position */-moz-box-ordinal-group:4;/* compatible with Mozilla Gecko Engine */-webkit-box-ordinal-group:4;/* compatible WebKit engine */box-ordinal-group:4;/* Standard FA * *} </style>

Demo effect

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!