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]