CSS3 Flex-Flow Adaptive responsive layout style class

1, say CSS3 Flex

Once a container is given a display:flex property, it will have the following characteristics:

• The item cannot be set to float.
• The style of the list is cleared.
• cannot be used vertical-align sets the vertical alignment.

Currently on the internet on the Flex mobile layout of the article very few, search about Flex article, most also introduced is the old knowledge point, obviously already does not meet the current World Wide Web Standard, want to know the related content of Flex, can refer to http://qianduanblog.com/2549.html. And, the support of the Flex browser is very few, only Google browser fully support, the other low version of the WebKit is not fully supported, Firefox also does not fully support (not support Flex-wrap), IE10 and above partial support.

Flex layout is very suitable for the current mobile devices and large screen browser Web development is very convenient, is the future of web development layout design direction, is a future technology. Flex layouts are able to write code that is small, with widths, heights, and positions that are adapted by the browser itself in accordance with established rules, with a cross-platform barrier-free reading experience.

2. Flex Style Class

2. CSS3 Flex part of the properties in IE and Firefox poor performance or support is not perfect, where IE9 and below are completely unsupported, IE10 does not support flex-grow (that is .flex-grow-0 .flex-grow-1 , the Class), Firefox 24 does not support flex-wrap (that is, .flex-wrap Class).
4. CSS3 Flex layout with spindle in the horizontal direction, the side axis in the vertical direction, the row (spindle) for the horizontal direction, the column (side axis) is the vertical direction. When the spindle is in the vertical direction and the side axis is horizontal, the row is in the vertical direction and the column is the horizontal direction. In any case, the line is the spindle, the column is the side axis.
6. The following flex layout class names are in the horizontal direction of the spindle, that is, the spindle is a row, and most of the class names are applied to the parent Flex container, except .flex-grow-0 .flex-grow-1 .
8. Flex Container:
   • Row layout:.flex-row
   • Row anti-layout:.flex-row-reverse
   • Column layout:.flex-col
   • Column anti-layout:.flex-col-reverse
   • Line break layout (default is not support for line wrapping *):.flex-wrap
10. Flex Container Line Horizontal direction item arrangement mode
    • Start Direction Arrangement:.flex-row-start
    • To rank in China:.flex-row-center
    • End Direction Arrangement:.flex-row-end
    • The ends are arranged in the direction, beginning to end white:.flex-row-around
    • The ends are arranged in the direction, beginning to end the white:.flex-row-between
12. Flex container Multi-line vertical direction item arrangement mode
    • Start Direction Arrangement:.flex-rows-start
    • To rank in China:.flex-rows-center
    • End Direction Arrangement:.flex-rows-end
    • The ends are arranged in the direction, beginning to end white:.flex-rows-around
    • The ends are arranged in the direction, beginning to end the white:.flex-rows-between
14. Flex Container Single Line vertical item alignment
    • To start snapping:.flex-col-start
    • Center alignment:.flex-col-center
    • To end the alignment:.flex-col-end
    • Stretch alignment:.flex-col-stretch
16. Flex Project Vertical Project alignment ( .flex-col similar to, just higher priority)
    • To start snapping:.flex-self-start
    • Center alignment:.flex-self-center
    • To end the alignment:.flex-self-end
    • Stretch alignment:.flex-self-stretch
18. Flex Projects Allocate a percentage on the remaining white space
    • The proportion is 0:.flex-grow-0
    • The proportion is 1:.flex-grow-1

The following, in turn, explains how to use the style class.

2.0. Brief description

The Flex style class, when describing rows and columns, takes the spindle as a horizontal axis and a vertical direction for the side axes (ref.: http://qianduanblog.com/2549.html#1%E3%80%81%E6%B5%81%E5%8A%A8%E5%B8% 83%E5%B1%80), where the line is horizontal and the column is vertical, but if the spindle is in the vertical direction and the side axis is horizontal, the row is vertical and the column is horizontal. Because in the actual situation, the former uses the most probability, so the use of the line to describe the spindle in the horizontal direction, the column describes the lateral axis in the vertical direction, more intuitive.

2.1. Flex Initialization

Use .flex the style class to initialize the container with Flex. Such as:

Demo:http://demo.qianduanblog.com/2881/1.html

Its HTML code is as follows:

1231232.2. Spindle direction

• .flex-row(default): Flex line layout, that is, the spindle is in the horizontal direction, the side axis is in the vertical direction.
• .flex-row-reverse: Flex line Anti-layout, .flex-row similar to change horizontal direction from right to left.
• .flex-col: Flex column Layout, that is, the spindle in the vertical direction, the side axis in the horizontal direction.
• .flex-col-reverse: Flex line Anti-layout, with .flex-col similar, change vertical direction from bottom to top.
• .flex-wrap: The main axis can be folded when the spindle is in the horizontal direction, which is similar to the current text wrapping, whereas the spindle can be folded vertically, and the spindle is similar to the ancient text-to-column, and the height of the container should be set when using multi-column layout.

Demo:http://demo.qianduanblog.com/2881/2.html

Examples of spindle wrapping:

Similarly, the folding is the same case, demo:http://demo.qianduanblog.com/2881/3.html.

2.3, single-line horizontal direction arrangement mode

• .flex-start(default): ranked left.
• .flex-center: Center arrangement.
• .flex-end: Ranked right.
• .flex-around: Scattered arrangement.
• .flex-between: Arranged separately.

Demo:http://demo.qianduanblog.com/2881/4.html.

2.4, multi-line vertical direction arrangement Way

You need to set the container's fixed height.

• .flex-rows-start(default): Multiline top-aligned.
• .flex-rows-center: Multi-line center alignment.
• .flex-rows-end: Multiple rows of bottom-aligned.
• .flex-rows-around: Multi-line dispersion alignment.
• .flex-rows-between: Multiple lines are aligned separately.

Detailed demo:http://demo.qianduanblog.com/2881/5.html.

2.5, single-line internal alignment method

• .flex-col-start(default): Top aligned.
• .flex-col-center: Center alignment.
• .flex-col-end: Bottom-aligned.
• .flex-col-stretch: Stretch alignment.

Detailed demo:http://demo.qianduanblog.com/2881/6.html.

2.6. Single Item inline alignment

The style acts on the Flex project, with the .flex-col-* same, representing the vertical alignment, but only for a single flex project, with a higher priority than it. With:

• .flex-self-start(default): The item is vertically aligned to the top.
• .flex-self-center: The item is aligned vertically in the center direction.
• .flex-self-end: The item is aligned vertically in the center direction.
• .flex-self-stretch: The item is stretched vertically in alignment.

Detailed demo:http://demo.qianduanblog.com/2881/7.html.

2.7. Proportion of surplus space allocated

This style acts on the Flex project.

• .flex-grow-0(default): The remaining space allocation percentage is 0.
• .flex-grow-1: The remaining space allocation ratio is 1.

Detail demo:http://demo.qianduanblog.com/2881/8.html

Original link: http://qianduanblog.com/2881.html