37.CSS3 Elastic Telescopic Layout "on"

29th Chapter CSS3 Elastic Telescopic Layout "on"

First, the layout introduction

The Flexbox layout, the elastic scaling layout model (flexible Box), allows for more efficient layout, but the layout is still in the the draft phase, and divided into the old version, the new version, mixed transition phase three different encodings.

IE Firefox Chrome Opera Safari

support with prefix required no 4~4~~~5.17+

Support without prefixes No no no no no no

The above data comes from the CSS manual.

First , the first step is to create a piece of content, divided into three regions.

HTML Section

<div>

<p> ... </p>

<p> ... </p>

<p> ... </p>

</div>

CSS Section

p{

width:150px;

border:1px solid Gray;

Background-color:silver;

margin:5px;

padding:5px;

}

Second, the old version

The property and attribute values are Display:box, which is a draft of 7 months of the year .

first, set the container properties display to a few of the parent elements that need the layout module .

(1)box: Display the container box model as a block-level elastic telescopic box (old version)

(2)inline-box: display the container box model as an inline-level elastic telescopic box (old version)

block-level occupies an entire line, similar to the <div> element, while the inline level does not occupy the entire row, like the <span> element. But we set the whole box, they don't occupy, keep it consistent.

set elasticity, take Firefox as an example

example,div{

Display:-moz-box; Flexible Layout

}

1. Thebox-orient property mainly realizes the fluctuation direction of the inner element of the box.

Set Vertical Flow

div{

-webkit-box-orient:vertical;

}

(1) Horizontal scaling items are arranged horizontally from left to right

(2) Vertical telescopic project vertically arranged from top to bottom

(3) Inline-axis Telescopic project is displayed along the inline axis

(4) Block-axis Telescopic project is displayed along the block axis

2.box-direction set the flow sequence in the easy expansion

Set Reverse order

div{

-moz-box-direction:reverse;

}

(1) Normal default value, regular order

(2) Reverse reverse order

3,box-pack for telescopic project distribution mode

The distribution is closed by the position

div{

-moz-box-pack:end;

}

(1) Start scaling project is aligned at the starting point

(2) End scaling project to end point snapping

(3) Center scaling Project is aligned with central point

(4) Justify telescopic project draw distribution,-webkit- support,-moz- not supported

4. extra time for box-align to handle telescopic containers

Center align, clean up and down extra space

div{

-moz-box-align:center;

}

(1) Start Telescopic project with the top as the benchmark to clean up the lower additional space

(2) End telescopic project to clean up extra space with bottom base

(3) Center scaling project centered on the central, the average clean up the upper and lower part of the loving space

(4) Baseline scaling project to clean up additional space by baseline

(5) Stretch Telescopic project fills the entire container, default

5.Box-flex can use floating-point numbers to distribute scaling items

set up each scaling item occupancy ratio

P:nth-child (1) {

-moz-box-flex:1; // equivalent to the 20%

}

P:nth-child (2) {

-moz-box-flex:3; // equivalent to the 60%

}

P:nth-child (3) {

-moz-box-flex:1; // equivalent to the 20%

}

6,box-ordinal-group can set the display position of the telescopic project

move the first position element, jump to the second position, and the third one unchanged

P:nth-child (1) {

-moz-box-flex:1;

-moz-box-ordinal-group:2;

}

P:nth-child (2) {

-moz-box-flex:3;

-moz-box-ordinal-group:1;

}

P:nth-child (3) {

-moz-box-flex:1;

-moz-box-ordinal-group:3;

}

37.CSS3 Elastic Telescopic Layout "on"