WeChat applet development: study notes [4] - style layout
Flex layout
new layout
In the development of small programs, we need to consider the adaptation on terminal devices of various sizes . In traditional web page development, we use the box model to achieve layout through display:inline | block | inline-block, position, float, which lacks flexibility and some adaptation effects are difficult to achieve . For example, a common list of information such as the following requires the content to remain vertically centered with an uncertain height:
In this case, we recommend using flex layout.
Before starting to introduce flex, for the convenience of expression, we agree on the following terms: elements using flex layout are referred to as "containers" for short. In the code example, container is used to represent the class name of the container . The elements inside the container are simply called "items", and in the code example, item is the class name of the item .
basic concept
The concept of flex was first proposed in 2009. The purpose is to provide a more flexible layout model, so that the container can achieve the best filling of the available space by changing the height, width and order of the items inside, and it is convenient to adapt to different sizes. content area .
The properties that set the container are:
1. flex-direction: row (default value) | row-reverse | column | column-reverse property determines the direction of the main axis (ie the arrangement direction of items)
2. flex-wrap:nowrap (default [no wrap]) | wrap[wrap] | wrap-reverse By default, items are arranged on a line (aka "axis"). flex-wrapAttribute definition, how to wrap if one axis cannot fit.
(1) nowrap(default): Do not wrap.
(2) wrap: Line feed, the first line is above.
(3) wrap-reverse: Line feed, the first line is below.
3.justify-content:flex-start (default) | flex-end | center | space-between | space-around | space-evenly defines how items are arranged on the main axis
4.align-items:stretch (default) | center | flex-end | baseline | flex-start defines how items are arranged on the cross axis
5.align-content:stretch (default) | flex-start | center | flex-end | space-between | space-around | space-evenly defines the alignment of multiple axes. This property has no effect if the item has only one axis.
The properties to set the project are:
1.order:0 (default value) | <integer> Defines the arrangement order of items, the smaller the array, the higher the front, the default is 0;
2.flex-shrink:1 (default value) | <number> Defines the reduction ratio column of the item, the default is 1, that is, if the space is insufficient, the item will shrink.
If the property of all items
flex-shrinkis 1, when there is insufficient space, they will be scaled down proportionally. If theflex-shrinkproperty of one item is 0 and the other items are 1, the former will not shrink when there is insufficient space.Negative values are not valid for this property
3. flex-grow: 0 (default value) | <number> Defines the enlargement ratio of the item, the default is 0. Even if there is remaining space, it will not be enlarged.
If all items have a
flex-growproperty of 1, they will equally divide the remaining space (if any). If one item has aflex-growproperty of 2 and the other items are all 1, the former will occupy twice as much remaining space as the other items.
4. flex-basis:auto (default) | The <length>flex-basisproperty defines the main size (main size) occupied by the item before allocating excess space. Based on this property, the browser calculates whether there is excess space on the main axis. Its default valueautois the original size of the item.
5.flex:none | auto | @flex-grow @flex-shrink @flex-basis is a shorthand for flex-grow, flex-shrink, and flex-basis. The value is set to none, which is equivalent to 00 auto. The value is set to auto, which is equivalent to 1 1 auto.
6.align-self:auto (default) | flex-start | flex-end |center | baseline| stretchalign-selfproperty allows a single item to have a different alignment than other items, and can override thealign-itemsproperty. The default value isautoto inherit thealign-itemsproperties of the parent element. If there is no parent element, it is equivalent tostretch。
