CSS3 Flexible Box layout

With more and more knowledge of HTML5, many new attributes of CSS3 have been excavated. Let's share some of the CSS3 elastic box models while you are free today. Let your own understanding also deepened, believe that the master in the folk, hope more advice.

CSS3 Flexible box layouts are much more versatile than tables and are useful in designing complex pages. It is easy to keep the relative position and size of the element unchanged when the screen and browser window sizes change.

Unlike CSS2 box layouts and inline layouts, flexible box layouts are not affected by floats. But its definition is not enough to support the kind of reference component that needs to be switched, resized, stretched, shrunk, and changed from vertical to horizontal, depending on the user agent.

For example: Chrome is set to horizontal axis scaling, and other browsers can only be set to horizontal scaling. It is seldom used for responsive design.

terms in a flexible box layout

1). Elastic container: The elastic container is the parent container of all elastic elements.

2). Elastic child elements: All child elements of an elastic container are elastic child elements.

3). Shaft: Flexible box layout in the sub-spindle and side axis. The spindle is the orientation of the layout layout and the side axis is perpendicular to the spindle.

4). Direction: The starting and ending positions of the elastic sub-element arrangement are represented by the start of the spindle, the end of the spindle and the start of the side axis, and the end edge of the side axis. You can also change the value of the property to change the display position.

Flexible box Layout Syntax Experience version specification

1). New specification: The syntax for the latest version specification, which is "Display:flex".

2). Intermediate Version: The 2011 unofficial norm of the grammar, namely "Display:flexbox".

3). Old specification: The 2009 norm of the grammar, namely "Display:box".

Application of flexible box layout (for example, syntax for version 09 specification)

[color=red] Note: Compatible with different browsers, CSS properties and attribute values should be prefixed with the proxy. such as: WebKit kernel agent when setting display:box box should prefix Display:-webkit-box[/color]

1). Setting of Elastic container: Display:box | Inline-box

Box set to block-level flex layout, Inline-box set to inline-level flex layout

2). Layout flow direction: Box-orient:horizontal | Vertical | Inline-axis | Block-axis

Horizontal: Horizontal layout from left to right, vertical: vertical layout from top to bottom, Inline-axis: Elastic child elements are arranged along an inline axis, Block-axis: The elastic elements are arranged along the block axis;

3). Layout Order: Box-direction:normal | Reverse

Normal: Regular display order; reverse: Reverse Display order

4). Flex-Wrap: Box-lines:single | Multiple

Single: The Flex child element is displayed one row or column. Content overflow hidden; multiple: Elastic child elements can be displayed in multiple rows or columns, and content overflow is not hidden.

5). Spindle Alignment: Box-pack:start | End | Center | Justify

Start: The elastic child elements start at the beginning of a row or column; end: Opposite to the start value; Center: The Elastic child element is positioned in the middle of a row or column; Justify: Elastic sub-elements are evenly distributed in one row or column

6). Side axis alignment: Box-align:start | End | Center | Baseline | Stretch

start: The edge of the elastic child element is placed at the top of the elastic container, and the extra space of the elastic container is placed at the bottom of the container; end: Opposite to the start value; Center: The elastic elements are aligned vertically in the elastic container; Baseline: The elastic sub-elements are aligned according to the baseline;

Stretch: The elastic child element fills the entire container.

7). Elasticity: Box-flex:number

Set Elastic sub-element elastic size

8). Display Order:box-ordinal-group:<integer>

The default value of Box-ordinal-group is 1. Used primarily to set the sequence sequence number of the elastic child elements in the container. The elastic sub-element arrangement will be arranged from small to large according to this attribute value, the higher the value, the higher the rank.

A small example:

<div class= "toolbar flex-box-h" >

<a> minor Bo </a>

<a> hooking </a>

<a> Me </a>

</div>

CSS Code

. Toolbar{position:absolute;height:50px;color: # #929292; width:100%; box-sizing:border-box;left:0;bottom : 0;background-color: #f7f7f8; border-top:1px solid #c4c4c4;-webkit-backface-visibility:hidden;

Backface-visibility:hidden;;}

. Flex-box-h{display:box;display:-webkit-box;box-orient:horizontal;-webkit-box-orient:horizontal; Box-direction:normal;-webkit-box-direction:normal;box-align:center;-webkit-box-align:center;}

. Flex-box-h a{display:block;box-flex:1;-webkit-box-flex:1;font-size:14px;text-align:center;color:# 929292;}

Finally, this is the case:

Description: This is a simple horizontal axis elastic box layout, the red horizontal line is the spindle, the red vertical line is the side axis.

CSS3 Flexible Box layout