preface
Has been doing in the process of the mobile terminal project, often in flex layout solve the screen adaptation of mobile client scenario, make the flex layout have to make the place, so the flex layout is a front-end developer must learn CSS skills, so she spent some time to do some summary, also compiled some information, the hope can give You can help
The relevant data
- Layout of the outline
- Flex Online Demo
- Super great Flex mini game
The basic concept
The relationship between the axis and the container is as follows
shaft
Define the main axis, which by default is left to right,
flex-direction: row | row-reverse | column | column-reverse
Copy the code
Setting the parent container
justify-content
The alignment of justify-content in the main axis
justify-content: flex-start | flex-end | center | space-between | space-around
Copy the code
justify-content: flex-start
justify-content: flex-end
justify-content: center
justify-content: space-between
justify-content: space-around
align-items
Align-items alignment on the cross axis
align-items: flex-start | flex-end | center | baseline | stretch
Copy the code
align-items: flex-start
align-items: flex-end
align-items: center
align-items: baseline
align-items: stretch
Hold the cross shaft full
flex-wrap
Flex-wrap whether to wrap a line
flex-wrap: wrap | nowrap | wrap-reverse
Copy the code
flex-wrap: wrap
Don’t wrap
flex-wrap: nowrap
A newline
flex-wrap: wrap-reverse
flex-flow
Flex-flow flex-direction & flex-wrap
align-content
Align-content The alignment of a multiline child container on the intersecting axis, first of all, if it satisfies line feeds
align-content: flex-start | flex-end | center | space-between | space-around | stretch
Copy the code
align-content: flex-start
align-content: flex-end
align-content: center
align-content: space-between
align-content: space-around
Setting child containers
flex
If a number has no unit, it will become an elastic subcontainer. If it has px, it will be allocated by pixel
Set all the child containers flex: 1, which are equally divided
When you set the second child to flex: 2 and the others to 1, the second child is twice as large as the others
If flex: 0 is set, the width of the child container is used
align-self
Sets the cross axis arrangement of child containers separately
align-self: flex-start | flex-end | center | baseline | stretch
Copy the code
Let’s say I set up the first child container separatelyalign-self: center
flex-basis
Represents the original size of the child container when it is not flex, i.e. without setting flex: the elasticity of the number
flex-grow
Elastic stretch scale. When set to this style, the current child container will stretch to the full spindle width
Set the first child to flex-grow: 2 and the second child to flex-grow: 1, so that their spread widths are 2:1
That is, they should divide the remaining width into three parts. If the child container width: 20%, then their width should be
(20% + 2 * shares allocated) : (20% + 1 * shares allocated)
flex-shrink
Out of proportion contraction allocation
If the subcontainer is set to a fixed shrink, this style will reduce the width of the subcontainer in a proportional manner. The principle is the same as above. Suppose that there are three subcontainers width: 50%, the first flex-shrink: 0, the second flex-shrink: 2, and the third flex-shrink: 3, then the first one must be fully occupied, it is impossible to reduce the width, because it does not need to allocate width to reduce, then the second and third have to reduce their width proportionally
order
Custom sort
This makes sense. You can set the order in order of the smallest to the largest
Set the second child to order: -1
The second child container runs to the front, isn’t it easy ~