29th. CSS Flex-Flex layout (top)

29th Chapter CSS3 Elastic Telescopic layout [Top]
Learning Essentials:
1. Introduction to Layouts
2. Older versions

This chapter focuses on the CSS3 provided in the 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. But the draft for this layout is still in the works.
Phase, and it is divided into the old version, the new version, and the hybrid transition version of three different encoding methods. In development, it is possible to
There are a variety of changes, browser compatibility is still a problem. Therefore, this lesson as a preliminary understanding can be.
Compatible
First, the first step: Create a piece of content, divided into three regions.
HTML section
<div>
<p> First paragraph content ...</p>
<p> Second paragraph content ...</p>
<p> Third paragraph content ...</p>
</div>
CSS Section
p {
width:150px;
border:1px solid Gray;
Background-color:silver;
margin:5px;
padding:5px;
}

div {
Display:-moz-box;
Display:-webkit-box;
Display:box;
}
With the above settings, the layout is distributed horizontally in addition to IE browsers. So below, we're going to focus on
Take a look at what these attributes mean.
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
Older versions. 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 displays the container box model as a block-level elastic telescopic box (old version)
Inline-box the container box model as an inline-level elastic telescopic box (old 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 <span>
Elements. But we set the whole box, they don't occupy, keep it consistent.
Set elasticity, take Firefox as an example
div {
Display:-moz-box;
}
1.box-orient Property
The box-orient mainly realizes the flow direction of the inner elements of the box.
Set Vertical flow
div {
-webkit-box-orient:vertical;
}
Property Value Description
Horizontal scaling items are arranged horizontally from left to right
Vertical scaling items are vertically arranged from top to bottom
Inline-axis telescopic projects are displayed along inline axes
Block-axis telescopic project to 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

div {
-moz-box-direction:reverse;
}
Property Value Description
Normal default value, normally order
Reverse reverse order

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 project is aligned at the starting point
End scaling project to end point snapping
Center scaling Project is aligned to a central 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 scaling project with the top as the benchmark to clean up the lower additional space
End scaling project to clean up extra space with bottom base
Center scaling project is centered on the middle and cleans up the upper and lower spaces on average
Baseline scaling project to clean up additional space based on baseline
Stretch Telescopic project fills the entire container, default

5.box-flex
The Box-flex property can use floating-point numbers to distribute scaling items
Set the proportions that each scaling item occupies
P:nth-child (1) {
-moz-box-flex:1;

}
P:nth-child (2) {
-moz-box-flex:2.5;
}
P:nth-child (3) {
-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
P:nth-child (1) {
-moz-box-ordinal-group:3;
}

Example

<! DOCTYPE html>
<meta charset= "Utf-8" >
<TITLE>CSS3 Elastic telescopic layout [Upper]</title>
<link rel= "stylesheet" type= "Text/css" href= "Style.css" >
<body>

<div>
<p> Technically speaking, IP (Internet Procotol, Internet Protocol) is an address protocol, is the specification and standard of Internet information transmission, and it is also the basis of Internet existence. The current internet is mostly based on the IPV4 version of the address agreement, the Protocol "generated" IP address of about 4.5 billion, by the international organization Unified Distribution. Simply put, the IP address is equivalent to the Internet Device network ID card, with it, computers, smartphones, cloud TV and other devices to normal Internet access. It is estimated that by 2020 the world will have about 50 billion networked devices, more than IPv4 to 10 times times the address. </p>
<p> There have been a lot of technology companies hoarding IP addresses, but the impending depletion of IP addresses is still a big loss for US companies that are interested in expanding their business online. In fact, the region has run out of IP addresses as early as 2011, and Europe has experienced a similar situation a year later, while North America is expected to face the same situation this summer. </p>
<p> simply put, the IP address of the Internet is equivalent to the telephone number of the phone, these numbers are different from the IP address to the end of these top-level domain names, because they are only the data in the Internet to transmit the platform behind. </p>
</div>

</body>

@charset "Utf-8";

p {
width:150px;
border:1px solid Gray;
Background-color:silver;
margin:5px;
padding:5px;
}

div {
width:100%;
Display:-moz-box;
Display:-webkit-box;
Display:box;

/*-moz-box-orient:vertical;*/
/*-moz-box-orient:inline-axis;*/
/*-moz-box-orient:block-axis;*/

/*-moz-box-direction:reverse;*/

/*-moz-box-pack:end;*/
/*-moz-box-pack:center;*/
/*-moz-box-pack:justify;*/
/*-webkit-box-pack:justify;*/

/*-moz-box-align:start;*/
/*-moz-box-align:end;*/
/*-moz-box-align:center;*/
/*-moz-box-align:baseline;*/

}

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;
}

29th. CSS Flex-Flex layout (top)