29th Chapter CSS3 Elastic Telescopic layout [bottom]

Learning Essentials:

1. New 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 New version

The new version of the Flexbox model is a draft of the work proposed in September 2012, which is the latest grammar introduced by the consortium. This version is determined to specify the standard, so that the new browser fully compatible, in the future of the browser to achieve a unified update.

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

Property value	Description
Flex	Display the container box model as a block-level elastic telescopic box (new version)
Inline-flex	Display the container box model as an inline-level elastic telescopic box (new version)

Most do not need a prefix

{    display: flex;}

Property	Ie	Firefox	Chrome	Opera	Safari
With prefix	No	No	21 ~ 28	No	7.0
With no prefix	11+	20+	29+	12.1	No

As you can see from this table, only the browser chrome and Safari versions of the WebKit engine need to be added-webkit-, and the Chrome version 29 can be omitted later.

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

{    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

{    flex-flow: row wrap;}

4.justify-content

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

Align by center point

{    justify-content: space-around;}

Property value	Description
Flex-start	Scaling items are aligned at the starting point
Flex-end	Stretch items Snap to end points
Center	The scaling project is aligned with the center point
Space-between	Telescopic Project Draw Distribution
Space-around	Ditto, but half of the space is reserved on both ends

5.align-items

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

Handling Additional space

{    align-itmes: center;}

property value	description
f Lex-start	Scaling project to the top of the baseline, clean up the lower additional space
flex-end	Scaling project base on bottom, clear upper additional space
center	The scaling project is centered on the middle, with an average cleanup of the upper and lower spaces
baseline td>	Scaling projects baseline, clean up additional space
stretch	Scaling project fills the entire container, default

6.align-self

Align-self, like Align-items, are cleaning up extra space, but it's a separate set of scaling items. All values are consistent with align-itmes.

Separate setup to clean up extra space

{    align-self: center;}

7.flex

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

Set up a scale assignment

{    Flex: 1;}  {    flex: 3;}  {    flex: 1;}

8.order

The Order property controls the sequence in which the scaling items appear, as with the Box-ordinal-group property.

Set the order of scaling items

{    order: 2;}  {    order: 3;}  {    order: 1;}

29th Chapter CSS3 Elastic Telescopic layout [bottom]