29th Chapter CSS3 Elastic Telescopic layout [medium]

Learning Essentials:

1. Mixed-over version

Keynote Teacher: Li Tinghui

This chapter mainly discusses the CSS3 provided in HTML5 to achieve the future responsive elastic scaling layout scheme, here to do a preliminary understanding.

A Mixed transition version

The mixed version of the Flexbox model is a work draft proposed in 2011, primarily for the IE10 browser, which has the same functionality as the older versions. We also use the file from the previous lesson, and then using the hybrid transition code, to achieve the IE10 of the stretched layout.

First, set the display of the telescopic box to have the following two attribute values:

Property value	Description
Flexbox	Display the container box model as a block-level elastic telescopic box (mixed version)
Inline-flexbox	Display of the container box model as an inline-level elastic telescopic box (mixed version)

IE prefix required-ms-

{    display: -ms-flexbox;}

1.flex-direction

The Flex-direction property, like the old version Box-orient property, is the arrangement of the scaling items.

Set up from top down

{    -ms-flex-direction: column;}

Property value	Description
Row	Set left-to-right arrangement
Row-reverse	Set the right-to-left arrangement
Column	Set top to bottom arrangement
Column-reverse	Set from bottom to top

2.flex-wrap

The Flex-wrap property is similar to the Box-lines in the old version, but box-lines we didn't explain it because there was no browser support for it.

Auto-wrap when settings cannot be accommodated

{    -ms-flex-wrap: wrap;}

Property value	Description
NoWrap	Default values, which are displayed in one row or column
Wrap	Wrap a Flex item when it cannot be accommodated
Wrap-reverse	Flex items cannot be accommodated when wrapping, direction and wrap opposite

3.flex-flow

The Flex-flow property is a shorthand form that sets the direction of the arrangement and controls line breaks.

Shorthand form

{    -ms-flex-flow: row wrap;}

4.flex-pack

The Flex-pack property, like Box-pack in an older version, sets the way the scaling project works.

Align by center point

{    -ms-flex-pack: center;}

Property value	Description
Start	Scaling items are aligned at the starting point
End	Stretch items Snap to end points
Center	The scaling project is aligned with the center point
Justify	Telescopic Project Draw Distribution

5.flex-align

The Flex-align property, like box-align in older versions, handles the extra space of the telescopic project container.

Handling Additional space

 div  {-ms-flex-align :  center ;} 

Property value	Description
Start	The scaling project is based on the top and cleans up the additional space below
End	Scaling projects base on the bottom to clean up the extra space above
Center	Scaling projects are centered on the middle, with an average of up and down extra space
Baseline	Scaling projects base on baselines to clean up additional space
Stretch	The telescopic project fills the entire container, the default

6.flex

Flex properties are similar to Box-flex in older versions to control scale allocations for scaling containers.

Set up a scale assignment

{    -ms-flex: 1;}  {    -ms-flex: 3;}  {    -ms-flex: 1;}

7.flex-order

The Flex-order property, like the Box-ordinal-group property, controls the order in which the scaling items appear.

Set the order of scaling items

{    -ms-flex-order: 2;}  {    -ms-flex-order: 3;}  {    -ms-flex-order: 1;}

29th Chapter CSS3 Elastic Telescopic layout [medium]