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 ~