The original article was first published in the wechat public number: Practice, welcome to pay attention to communication!

Flex is a new layout solution proposed by W3C that makes it easy to implement responsive page layout. It is supported by almost all browsers so far. Flex is short for Flexible Box, which is translated as “Flexible layout”.

  1. Basic concept
  2. Flex container Properties
  3. Flex Project Properties
  4. conclusion

Basic concept

Elements with a Flex layout are called Flex containers, and all child elements automatically become members of the container, also known as Flex projects, which are child views of the Flex layout. Here is a diagram of the Flex layout with its default Settings:

As shown in the figure above, the default Flex container has two axes: the horizontal main axis and the vertical cross axis. The orientation of the main axis and the cross axis is not absolute, but can vary depending on the Settings. Here are a few positions related to the main axis and the cross axis:

  • Main start: the starting position of the spindle
  • Main end: The end position of the spindle
  • Main size: The amount of main space occupied by a single Flex project
  • Cross start: the starting point of a cross axis
  • Cross end: The end point of a cross axis
  • Cross axis space (Cross size): The amount of cross axis space occupied by a single Flex project

Flex container Properties

  1. Flex-direction: sets the spindle direction. The values are as follows:
  • Row: The default value, sets the main axis to horizontal and the starting point to the left
  • Row-reverse: Sets the spindle to horizontal with the starting point to the right
  • Column: Sets the main axis to vertical, starting at the top
  • Column-reverse: Sets the main axis to vertical with the starting point below
row row-reverse column column-reverse
  1. Flex-wrap: sets how to wrap a line. Values are as follows:
  • Nowrap: Default, no line breaks
  • Wap: automatic line wrap
  • Wrap-reverse: automatic line wrap, on the first line
nowrap wap wrap-reverse

  1. Flex-flow: short form of the flex-direction and flex-wrap properties. The default value is row nowrap.

  2. Context-content: Sets the alignment of items on the main axis as follows:

  • Flex-start: default, left-aligned
  • Flex-end: right-aligned
  • Center: center
  • Space-between: aligns both ends
  • Space-around: Each item is spaced equally on both sides, half as far from the edge of the screen as the other items
  • Space-instituted: Evenly distribute items, evenly spaced from the edge of the screen as well as between other items
flex-start flex-end center space-between space-around space-evenly
  1. Align-items: sets how items are aligned on the cross axis. The values that can be set are as follows: : Default value. If no items have height specified or auto is set, items will fill the height of the entire container.
  • “Stretch” : the default value. If no item has no specified height or if auto is set, the item takes up the entire height of the container. In the figure below, item 1 has no specified height and all other items have specified heights

The height is not specified

  • Flex-start: Sets the alignment with the starting point of the cross axis
  • Flex-end: Sets the alignment with the end point of the cross axis
  • Center: Sets the key alignment with the cross axis
  • Baseline: Sets the baseline alignment between an item and the first line of text in the item
stretch flex-start flex-end center baseline
  1. Align-content: Sets the alignment of multiple axes. If there is only one axis, this attribute does not take effect. You can set the following attributes:
  • “Stretch” : default value. The axis takes up the entire cross axis
  • Flex-start: Sets the alignment with the starting point of the cross axis
  • Flex-end: Sets the alignment with the end of the cross axis
  • Center: Sets the alignment with the midpoint of the cross axis
  • Space-between: Sets the alignment with both ends of the crossing axis, and the spacing between the axes is evenly distributed
  • Space-around: Set the spacing on both sides of each axis to be equal, and the spacing between the axis and the axis is twice the spacing between the axis and the edge of the crossing axis
stretch flex-start flex-end center space-between space-around

Flex Project Properties

  1. Order: The default value is 0 to set the order of items. The smaller the value is, the higher the order is, as shown in the figure below:

  1. Flex-grow: Sets the size of the project. The default value is 0 and does not expand if there is free space, as shown below:
flow-grow=0 flow-grow=1 Flow-grow sets different values
  1. Flex-shrink: Sets the size of the project. The default value is 1. If the project has insufficient space, the project will shrink, as shown below:
flow-shrink=1 flow-shrink=0 Flow-shrink sets different values

In the diagram above, when Flex-shrink is set to 0, each item is not scaled, so the fourth square is squeezed out, and flex-shrink is set to 1, which allows for a certain amount of scaling when space is insufficient.

  1. Flex-basis: the main axis space occupied by the project, as shown below:

  1. Align-items: align-self: defines the alignment of the element itself. This attribute is similar to the align-items attribute.
auto stretch flex-start flex-end center baseline

Setting auto in the effect above follows the setting of align-items in the Flex container.

  1. Flex: Flex is short for flex-grow, flex-shrink, and flex-basis. The default value is 0, 1 auto.

conclusion

Recently tried WeChat small programs, development difficulty is not great feeling, think about the content of this article is also the most important content of the WeChat applet, meant to continue the study of small program series, but looked at the back of the content of no more than the use of the individual components is a small program, if there are other project development experience, There is really no need to verify learning component by component, so the learning of small programs ends here. Finally, say a little wechat small program is the most important I think or Flex layout. You can choose to pay attention to personal wechat public number: practice to get the latest updates, exchange and study together!