CSS3 Elastic Box Model (Flexbox)

Flexboxis a layout module, not a simple property, which contains the attributes of the parent and child elements.

FlexboxThe main idea of the layout is that elements can be resized to fit the available space, and when the available space becomes larger, the flex element will stretch to fill the available space and will shrink automatically when the flex element exceeds the free space. In short, the flex element allows you to automatically scale your layout according to the size of the browser.

Create a Flex container

flexboxThe layout first needs to create a flex container. Set display the value of the property to for this element flex . For IE10, we need to add it at the beginning -ms-flexbox .

. container{    Display:-webkit-flex;    Display:-moz-flex;    Display:flex;    Display:-ms-flexbox;}　

Note that the parent element must be Display:box or Display:inline-box when using the elastic box model

Horizontal OR vertical distribution

box-orientAxes for defining distributions: Vertical and horizional. These two values define the box vertical display and the horizontal display, respectively:

. container{  Display:box;  Box-orient:horizontal;}

Grammar:box-orient: horizontal|vertical|inline-axis|block-axis|inherit;

| Value | Description |
| ------------- |:-------------:|
| Inline-axis (axis) | Arranges child elements (that is, from left to right) along the inline axis.
| Block-axis | Arranges child elements along the block axis (that is, from top to bottom).

Case

<! DOCTYPE html>
　　
Enable Flexbox
Because the body element contains the caption element that you want to center, we display set his property value to "Flex":
body {    Display:flex;    }    
The main function is to let the body of the element use flexbox the layout rather than the normal block layout. All child elements in the document flow (that is, elements that are not absolutely positioned) now become scaling items.
Reverse distribution
Body {  display:-webkit-box;  Display:-moz-box;  box-orient:vertical;  Box-direction:reverse;  Color:white;} #box1 {    background:red;    height:100px;    width:80px;    } #box2 {    background:black;    height:100px;    width:80px;} #box3 {    background:blue;    height:100px;    width:80px;}    </style>
　　
Set the alignment of the Flex box
You can also specify the alignment of the contents of the elastic container with the spindle and the horizontal axis (perpendicular to the spindle) after any flexible length and automatic margins have been resolved. You can justify-content、align-items、align-self align-content adjust this alignment by and properties.
Using justify-content properties, you can set the alignment of an elastic item to the spindle of an elastic container after resolving any flexible length and automatic margins. The values that are displayed justify-content and the effects of these values on the elastic container (with three elastic items).
Justify-content:flex-start (default) The scaling item aligns to the starting position of the line. Justify-content:flex-end The Flex project aligns to the end of the line. The Justify-content:center telescopic project aligns to the middle of the line. Justify-content:space-between scaling projects are evenly distributed in the line. The beginning of the first line in a row, and the last stretch item at the end of a row. Justify-content:space-around scaling projects are evenly distributed across the line, leaving half the space on both ends.
Align-items Side axis alignment (for telescopic containers, which is the parent element of the scaling project)
　　align-itemsis a property that corresponds justify-content to and echoes. align-itemsadjust how the telescopic project is positioned on the side axis. The possible values are:
Flex-start: The outer margin of the starting edge of the side axis of the telescopic item is close to the side where the line starts at the side axis. Flex-end: The telescopic item is at the edge of the end of the side axis by the margin of the line at the end of the side axis. Center: The margin box for the telescopic project is centered on the side axis of the row. Baseline: The scaling items are aligned according to their baseline. Stretch (default): Stretch item Extrude fills the entire telescopic container. This value causes the size of the outer box of the project to be as close to the size of the row as possible, following the limits of the "min/max-width/height" property.
flex-wrap 伸缩行换行
　　
So far, each telescopic container has and has only one stretch row. With Flex-wrap you can create multiple scaling lines for a telescopic container. This property accepts the following values:
NoWrap (default) wrapwrap-reverse
　　
If Flex-wrap is set to wrap, the scaling item wraps to a new stretch line when a scaling line cannot tolerate all the scaling items. The new telescoping row is added according to the direction of the side axis.

 
  
 
Align-content Stack Scaling
align-contentflex-wrapthe behavior that will change. It align-items is similar to, but not aligned with, the scaling project, which aligns with the scaling line. As you might have thought, the values it accepts are similar:
Flex-start: The rows are stacked to the start position of the telescopic container. Flex-end: The rows are stacked to the end position of the telescopic container. Center: Each row is stacked to the middle of the telescopic container. Space-between: The rows are evenly distributed across the telescopic container. Space-around: The rows are evenly distributed across the telescopic container, with half the space on each side. Stretch (default): Each row will stretch to occupy the remaining space.
align-self 侧轴对齐
The properties of the telescopic project align-self override the properties of the project's scaling container align-items . Its value is the align-items same as:
Stretch (default) flex-startflex-endcenterbaseline
Properties Explained
box-directionproperty specifies in what direction the child elements of the box element are arranged.
Grammar:box-direction: normal|reverse|inherit;
box-packThe property specifies where the child element is placed when the box is larger than the child element's dimensions.
Grammarbox-pack: start|end|center|justify;
Start: All child containers are distributed to the left of the parent container, and the right side is empty end: All child containers are distributed to the right of the parent container, left blank justify: Average distribution of all sub-containers (default) Center: Evenly distributes the remaining space of the parent container (can compress the size of the child container, and has a globally centered effect)
box-alignThe property specifies how the child elements of the alignment box are aligned.
Grammar
box-align: start|end|center|baseline|stretch;start ：子容器从父容器顶部开始排列end ：子容器从父容器底部开始排列center ：子容器横向居中（有点奇怪）baseline ：所有子容器沿同一基线排列（很难理解）stretch ：所有子容器和父容器保持同一高度（默认值）
box-flexproperty specifies whether the child elements of the box can scale their dimensions.
Grammar
box-flex: value;
Look at one of the following examples:
<div style=  <div style= </div>< div style=-webkit-box-flex:2;< Span class= "Hljs-tag" ></div>< Div style= "Width:100px; </div></DIV>    
http://jsfiddle.net/8ca9zq8q/1/ Click to preview
As with traditional box models, overflow properties are used to determine how they are displayed. To avoid overflow, you can set box-lines the multiple display to make it wrap.
flex: initial
A flex scaling item with a property value set to it initial will not change if there is space left, but will shrink if necessary.
flex: auto
A Flex property value is set to a auto telescopic project that automatically scales to occupy all the remaining space according to the spindle.
autoCurrently only valid in Opera 12.11, not available on Chrome 23.0.1271.95. You can do this by using Flex:1; To achieve the same effect.
flex: none
A flex property value is set as a none scaling project and does not scale in any case.
First understand here, then the further study will be updated gradually. I have to say that CSS3 's elastic box model brings the gospel to front-end developers and lets the annoying floats go to hell ...
 
CSS3 Elastic Box Model (Flexbox)