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" when translated. 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 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, aligns items to the left.
- flex-end: Aligns items to the right.
- center: Aligns items in the center.
- space-between: Aligns items to both ends, with equal spacing between them.
- space-around: Distributes spacing evenly around each item, with half the spacing between items and the screen edges.
- space-evenly: Distributes items evenly, with equal spacing between items and the screen edges.
- align-items: Sets how items align on the cross axis. The possible values are:
- stretch: Default value, if no item has a specified height or set to auto, the item will occupy the entire height of the container. In the diagram below, item 1 does not have a specified height, while the other items 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 item with the baseline of the first line of text in the item.
- align-content: Sets the alignment of multiple lines on the cross axis. This property only takes effect when there are multiple axes. The possible values are:
- stretch: Default value, 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 lines to both ends, with equal spacing between them.
- space-around: Distributes spacing equally on both sides of each line, with twice the spacing between lines and the edges of the cross axis.
Flex Item Properties#
-
order: Default value is 0, sets the order of items. The smaller the value, the earlier the item is placed.
-
flex-grow: Sets the enlargement ratio of items. Default value is 0, which means items will not grow even if there is extra space.
-
flex-shrink: Sets the shrinkage ratio of items. Default value is 1, which means items will shrink if there is not enough space.
-
flex-basis: Sets the space occupied by items on the main axis.
-
align-self: Defines the alignment of the item itself. This property is similar to align-items, so I won't go into detail. Here is an example:
Setting auto will follow the align-items setting in the Flex container.
- flex: Shorthand for flex-grow, flex-shrink, and flex-basis properties. Default value is 0 1 auto.
Summary#
Recently, I tried developing a WeChat mini program and found that it is not very difficult. I think the content of this article is the most important in WeChat mini program development. I originally planned to continue studying the mini program series, but looking at the content ahead, it is mainly about the use of various components in the mini program. If you have experience in other project development, there is no need to verify and learn each component one by one. So I will stop here with the mini program study. Finally, I think the most important thing in WeChat mini program development is Flex layout.