Flex is a new layout scheme proposed by W3C, which can conveniently achieve responsive page layout. So far, almost all browsers support Flex. Flex is short for Flexible Box, which means "flexible layout" in translation. Let's learn how to use Flex layout together.
- Basic Concepts
- Flex Container Properties
- Flex Item Properties
- Summary
Basic Concepts#
Elements that adopt Flex layout are called Flex containers, and all child elements will automatically become container members, also known as Flex items. Below is a diagram of Flex layout under default settings:
As shown in the above diagram, the default Flex container has two axes: the horizontal main axis and the vertical cross axis. The direction of the main axis and the cross axis is not absolute, but varies depending on the settings. The following are several positions related to the main axis and the cross axis:
- Main Start: The starting position of the main axis
- Main End: The ending position of the main axis
- Main Size: The space occupied by a single Flex item on the main axis
- Cross Start: The starting position of the cross axis
- Cross End: The ending position of the cross axis
- Cross Size: The space occupied by a single Flex item on the cross axis
Flex Container Properties#
- flex-direction: Sets the direction of the main axis. The possible values are:
- row: Default value, sets the main axis to be horizontal with the starting point on the left
- row-reverse: Sets the main axis to be horizontal with the starting point on the right
- column: Sets the main axis to be vertical with the starting point at the top
- column-reverse: Sets the main axis to be vertical with the starting point at the bottom
- flex-wrap: Sets how the items wrap. The possible values are:
- nowrap: Default value, no wrapping
- wrap: Wraps automatically
- wrap-reverse: Wraps automatically, starting from the line above the first line
-
flex-flow: Shorthand for flex-direction and flex-wrap properties. The default value is row nowrap.
-
justify-content: Sets the alignment of items on the main axis. The possible values are:
- flex-start: Default value, left alignment
- flex-end: Right alignment
- center: Center alignment
- space-between: Alignment at both ends
- space-around: Equal spacing between each item, with half the spacing between items and the edge of the screen
- space-evenly: Evenly distributes items, with equal spacing between items and the edge of the screen
- align-items: Sets how items are aligned on the cross axis. The possible values are:
- stretch: Default value, if no height is specified for a project or set to auto, the project will occupy the entire height of the container. The first project in the illustration below does not specify a height, while the rest of the projects have specified heights.
- flex-start: Aligns with the start of the cross axis
- flex-end: Aligns with the end of the cross axis
- center: Aligns with the center of the cross axis
- baseline: Aligns the project with the baseline of the first line of text in the project
- align-content: Sets the alignment of multiple flex lines. This property does not take effect if there is only one axis. The possible values are:
- stretch: Default value, flex lines occupy the entire cross axis
- flex-start: Aligns with the start of the cross axis
- flex-end: Aligns with the end of the cross axis
- center: Aligns with the center of the cross axis
- space-between: Aligns with both ends of the cross axis, with equal spacing between flex lines
- space-around: Equal spacing on both sides of each flex line, with spacing between flex lines being twice the spacing between flex lines and the edge of the cross axis
Flex Item Properties#
- order: Default value is 0, sets the order of items. The smaller the value, the closer to the front. As shown in the diagram below:
- flex-grow: Sets the enlargement ratio of items. Default value is 0, which means no enlargement even if there is extra space. As shown in the diagram below:
- flex-shrink: Sets the shrinkage ratio of items. Default value is 1, which means items will shrink if there is not enough space. As shown in the diagram below:
In the above diagram, when flex-shrink is set to 0 for all items, the items will not shrink, so the fourth square is pushed out. By setting flex-shrink to 1, the items can be scaled to a certain extent when there is not enough space.
- flex-basis: The space occupied by an item on the main axis. As shown in the diagram below:
- align-self: Defines the alignment of the element itself. This property is similar to align-items, so I won't go into detail. Here is the effect diagram:
In the above effect, setting auto will follow the align-items setting in the Flex container.
- flex: flex is a shorthand for flex-grow, flex-shrink, and flex-basis. The default value is 0 1 auto. I won't include the effect diagram here.
Summary#
Recently, I tried WeChat Mini Programs and found that the difficulty of development is not very high. I think the content of this article is also the most important in WeChat Mini Programs. I originally planned to continue studying Mini Programs, but looking at the content ahead, it is nothing more than the use of various components in Mini Programs. If you have experience in other project development, there is no need to verify and learn one component at a time. Therefore, the study of Mini Programs ends here. Finally, I think the most important thing in WeChat Mini Programs is Flex layout.