CSS3 flexible layout flexible flow (flex-flow) attribute details and Instances

CSS3 flexible layout flexible flow (flex-flow) attribute details and Instances

Elastic layout is a powerful layout method introduced by CSS3. It is used to replace some complex and error-prone hacks methods used by Web developers (such as using float for similar stream layout ).

Flex-flow is short for flex-ction and flex-wrap attributes. The syntax is as follows:

Flex-flow: |

Flex-direction: row (Initial Value) | row-reverse | column-reverse

Flex-wrap: nowrap (Initial Value) | wrap-reverse

Flex-direction defines the placement direction of an Elastic project in an elastic container. The default value is row, that is, the internal direction of the line (generally from left to right, but note that this is related to the writing mode ).

Flex-wrap defines whether to split rows so that the elastic project can be included by the container. *-Reverse indicates the opposite direction.

The combination of the flex-flow attribute determines the display mode of the elastic container in the main axis and cross axis directions. The following example intuitively illustrates the differences between attribute values:

 

.flex-container {    display: flex;}.flex-container.first {    flex-flow: row;}/* Initial value. Main-axis is   inline, no wrap. */.flex-container.second {    flex-flow: column wrap;    -webkit-flex-flow: column wrap;}/* Main-axis is block-direction (top to bottom)   and lines wrap in the inline direction (rightwards). */.flex-container.third {    flex-flow: row-reverse wrap-reverse;}/* Main-axis is the opposite of inline direction   (right to left). New lines wrap upwards. *//* other styles just for format */ul {    padding: 0;}li {    list-style: none;}.flex-container {    background: deepskyblue;    width: 200px;    height: 200px;    margin: 5px auto;}.flex-container.first {    height: 100px;}.flex-item {    background: tomato;    padding: 5px;    width: 80px;    height: 80px;    margin: 5px;    line-height: 80px;    color: white;    font-weight: bold;    font-size: 2em;    text-align: center;}h1 {    font-size: 22px;    text-align: center;}.flex-demo {    display: flex;}

In the preceding example, the default attribute "row" is used in the 1st auto-scaling item list and the row is not split. The width of the auto-scaling item is compressed as needed.
Column wrap is used in the 2nd lists, indicating that the direction of the spindle is from top to bottom, while that of the row splitting is from the inside (to the right ).
The 3rd lists use row-reverse wrap-reverse, indicating that the direction of the spindle is in the opposite direction of the line (from right to left), and the new line is split up.