29th Chapter CSS3 Elastic Telescopic layout [Top]

Learning Essentials:

1. Introduction to Layouts

2. Older versions

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 Introduction to Layouts

CSS3 offers a new layout: The Flexbox layout, the elastic scaling layout model (flexible Box). Used to provide a more efficient way to implement responsive layouts. However, this layout is still in the draft stage, and it is divided into the old version, the new version and the hybrid transition version of three different encoding methods. There may be a variety of changes in development, and there are problems with browser compatibility. Therefore, this lesson as a preliminary understanding can be.

First, let's look at the compatibility of older versions of browsers:

Flexbox compatibility of older versions

Property	Ie	Firefox	Chrome	Opera	Safari
With prefix	No	4 ~ 25	4 ~ 31	15 ~ 18	5.17+
With no prefix	No	No	No	No	No

The above data, we are excerpted from the CSS3 manual. Of course, different textbooks and articles will be slightly different. But the error rate of one to two versions, the impact is not small.

First, the first step: Create a piece of content, divided into three regions.

HTML section

<Div>    <P>The first paragraph of the content ...</P>    <P>The second paragraph of the content ...</P>    <P>The third paragraph of the content ...</P></Div>

CSS section

{    width: 150px;     Border: 1px solid Gray;     margin: 5px;     padding: 5px;}  {    display: -moz-box;     Display: -webkit-box;     display: box;}

With the above settings, the layout is distributed horizontally in addition to IE browsers. So below, let's focus on the implications of these attributes.

Two Older versions

If the property and property values are: Display:box, then the working draft, which was set up in July 2009, belongs to the old version. It is geared toward the resilient layout of some early browsers.

First, we'll set the container properties display for a few of the parent elements that need the layout module.

Property value	Description
Box	Display the container box model as a block-level elastic telescopic box (old version)
Inline-box	Display the container box model as an inline-level elastic telescopic box (older version)

We know the block level, which 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

{    display: -moz-box;}

1.box-orient Properties

The box-orient mainly realizes the flow direction of the inner elements of the box.

Set Vertical flow

{    -webkit-box-orient: vertical;}

Property value	Description
Horizontal	Scale items are arranged horizontally from left to right
Vertical	Telescopic items are vertically arranged from top to bottom
Inline-axis	Telescopic items are displayed along inline axes
Block-axis	Telescopic items rehearse along the block axis display

2.box-direction

The Box-direction property is primarily to set the flow order in the telescopic container.

Set reverse order

{    -moz-box-direction: reverse;}  

Property value	Description
Normal	Default value, normal order
Reverse	Reverse

3.box-pack

The Box-pack property is used to distribute the scaling items.

The distribution is closed by the position

 div  {-moz-box-pack :  end ;}    

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,-webkit-support,-moz-not supported

4.box-align

The Box-align property is used to handle the extra space of the telescopic container. Center align, clean up and down extra space

 div  {-moz-box-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

5.box-flex

The Box-flex property can use floating-point numbers to allocate scales for scaled items//To set the proportions occupied by each scaling item

{    -moz-box-flex: 1;}  {    -moz-box-flex: 2.5;}  {    -moz-box-flex: 1;}

6.box-ordinal-group

The Box-ordinal-group property allows you to set the display position of the scaling item.

Jumps the element in the first position to the third position

{    -moz-box-ordinal-group: 3;}

29th Chapter CSS3 Elastic Telescopic layout [Top]