Css3 flex Flow Adaptive responsive layout style class, css3flex

Css3 flex Flow Adaptive responsive layout style class, css3flex

Today, we are working on a horizontal and centered layout of the Interior elements of the div with horizontal edge pasting (a bit around, look at the figure directly ),

At the beginning, I used some common css + html methods to achieve layout. I felt like this was very rigid (I added a div and didn't set a negative margin-left for the div, this value must be calculated ),

So I thought of the flex stream layout of css3, so I found some information on the Internet:

1. css3 flex

Once a container is assigneddisplay:flexAttribute, which has the following features:

• Project float cannot be set.
• The style of the List is cleared.
• Unavailablevertical-alignSet vertical alignment.

However, the compatibility issue is quite obvious. Only Google browsers fully support it. Other earlier versions of webkit do not fully support Firefox (not flex-wrap ), ie10 and later.

The flex layout is very suitable for the development of mobile devices and large screen browsers. It is the future direction of Web Page Development Layout Design and a future technology. The flex layout allows you to write code in a small manner. All the widths, heights, and locations are adapted by the browser according to the established rules, so that the cross-platform reading experience is free.

2. flex Style

1. Some attributes of css3 flex are not performing well or support is not perfect in ie and Firefox. ie9 and below are not supported at all, and ie10 is not supported.flex-grow(That is.flex-grow-0 .flex-grow-1Class), Firefox 24 does not supportflex-wrap(That is.flex-wrapClass ).
2. The css3 flex layout is based on the horizontal direction of the spindle, the vertical direction of the side axis, the horizontal direction of the row (main axis), and the vertical direction of the column (side axis. When the spindle is in the vertical direction and the side axis is in the horizontal direction, the row is in the vertical direction, and the column is in the horizontal direction. In any case, all rows are the main axis and columns are the side axis.
3. The names of the following flex layout classes are subject to the horizontal direction of the spindle, that is, the spindle is the line. Most of the class names are applied to the parent flex container,.flex-grow-0 .flex-grow-1.
4. Flex container:
   • Row layout:.flex-row
   • Row anti-layout:.flex-row-reverse
   • Column Layout:.flex-col
   • Reverse column layout:.flex-col-reverse
   • Line feed layout (by default, line feed is not supported *):.flex-wrap
5. Flex container single row horizontal direction projectArrangement
   • Start direction:.flex-row-start
   • Center:.flex-row-center
   • End direction:.flex-row-end
   • The two ends are arranged in the direction and the beginning is over White:.flex-row-around
   • The two ends are arranged in the direction and the remainder white is started to end:.flex-row-between
6. Flex container multi-line vertical direction projectArrangement
   • Start direction:.flex-rows-start
   • Center:.flex-rows-center
   • End direction:.flex-rows-end
   • The two ends are arranged in the direction and the beginning is over White:.flex-rows-around
   • The two ends are arranged in the direction and the remainder white is started to end:.flex-rows-between
7. Flex container single row vertical direction projectAlignment Mode
   • Start alignment:.flex-col-start
   • Center alignment:.flex-col-center
   • End alignment:.flex-col-end
   • Stretch alignment:.flex-col-stretch
8. Flex project vertical projectAlignment Mode(.flex-colSimilar, but with a higher priority)
   • Start alignment:.flex-self-start
   • Center alignment:.flex-self-center
   • End alignment:.flex-self-end
   • Stretch alignment:.flex-self-stretch
9. The flex project is left blank.Allocation proportion
   • Proportion: 0:.flex-grow-0
   • Proportion: 1:.flex-grow-1

The following describes how to use the style class in sequence.

2.0 brief description

In the flex style class, when describing rows and columns, the main axis is used as the horizontal axis and the side axis is used as an example. In this case, the row is the horizontal direction and the column is the vertical direction; however, if the spindle is in the vertical direction and the side axis is in the horizontal direction, the row is in the vertical direction and the column is in the horizontal direction. In actual conditions, the former has the highest probability. Therefore, it is more intuitive to describe the horizontal direction of the spindle in a row and describe the vertical direction of the side axis in a column.

2.1. flex Initialization

Use.flexThe style class can be used to initialize the container flex.

2.2. Spindle direction

• .flex-row(Default): flex row layout, that is, the horizontal direction of the spindle and the vertical direction of the side axis.
• .flex-row-reverse: Flex line anti-layout,.flex-rowSimilarly, change the horizontal direction from right to left.
• .flex-col: Flex column layout, that is, the spindle is in the vertical direction and the side axis is in the horizontal direction.
• .flex-col-reverse: Flex line anti-layout,.flex-colSimilarly, change the vertical direction from bottom to top.
• .flex-wrap: Line feed layout, that is, when the spindle is in the horizontal direction, the spindle can be folded, similar to the current text line feed; otherwise, the spindle is in the vertical direction, the spindle can be folded, similar to the ancient text for columns, when using multi-column layout, you must set the height of the container.

2.3 horizontal row Arrangement

• .flex-start(Default): arranged on the left.
• .flex-center: Center.
• .flex-end: Right-arranged.
• .flex-around: Scattered.
• .flex-between: Separated.

2.4 vertical multi-row Arrangement

Set the fixed height of the container.

• .flex-rows-start(Default): multiple rows are aligned at the top of the corner.
• .flex-rows-center: Multi-row center alignment.
• .flex-rows-end: Multi-row bottom alignment.
• .flex-rows-around: Scatter and alignment of multiple rows.
• .flex-rows-between: Multiple rows are separated and aligned.

2.5 single row inner alignment

• .flex-col-start(Default): alignment on the top.
• .flex-col-center: Center alignment.
• .flex-col-end: Bottom alignment.
• .flex-col-stretch: Stretch and alignment.

2.6 single-Project intra-row alignment

This style acts on the flex project, and.flex-col-*Same, indicating the vertical alignment, but it only applies to a single flex project, the priority is higher than it. Details:

• .flex-self-start(Default): Align the vertical direction of the project to the top.
• .flex-self-center: Align the vertical direction of the project.
• .flex-self-end: Align the vertical direction of the project.
• .flex-self-stretch: Stretch and align projects vertically.

2.7. Percentage of remaining space allocated

This style acts on the flex project.

• .flex-grow-0(Default): The percentage of available space allocated is 0.
• .flex-grow-1: The percentage of available space allocated is 1.

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.