Article From:



flexThe layout is the abbreviation of Flexible Box, that is, “elastic layout” or “elastic box model”.

flexSpecifies that any container can be specified as a Flex layout.

  anyContainer{  display:flex;    }

In line elements can also be specified as flex layout: change the display value to inline-flex, the elastic layout in the row.

WebkitThe browser of the kernel must be prefixed with -webkit-flex.

Note that after setting up the Flex layout, the child elements arefloatclearandvertical-alignThe property will fail.


A container set up to flex, there are two axes,principal axisandCross axis;The direction of these two axes is horizontal or vertical.

principal axis,callmain axis(axis Axis, axis). The beginning and the end are called respectively.main startAnd main end

Cross axis,callcross axis,The beginning and end of a callcross start Cross and end

External containerAattribute







They mean, respectively:

flex-direction Orientation of internal elements (horizontal or vertical)


  • row(Default value: the spindle is horizontal and the starting point is on the left.
  • row-reverse:The main axis is horizontal and the starting point is on the right side.
  • column:The main axis is in the vertical direction and the starting point is in the upper edge.
  • column-reverse:The main axis is in the vertical direction and the starting point is in the lower edge

flex-wrap There are too many internal elements. Can’t we line up on one axis? How do you change the line?


        nowrap(Default): no change

         wrap:On the line, the first line is above

         wrap-reverse:On the line, the first line is below

flex-flow:It is the combination of 1 and 2.

The natural default is: flex-flow:row nowrap;

justify-content:The alignment of the internal elements on the spindle is in the middle, main, start, main, end, or even distribution.

 justify-content: flex-start | flex-end | center | space-between | space-around;



align-items:The alignment of the internal elements on the cross axis:

 align-items: flex-start | flex-end | center | baseline | stretch;



align-content:This attribute is useful with many axes, and usually an axis is useless.

  • flex-start:Alignment with the starting point of the cross axis.
  • flex-end:Alignment with the end of the cross axis.
  • center:Align with the middle point of the cross axis.
  • space-between:The ends of the axes are aligned with each other, and the spacing between the axes is evenly distributed.
  • space-around:The intervals on each side of each axis are equal. Therefore, the distance between axes is twice as large as that between the axis and the frame.
  • stretch(Defaults): the axis accounts for the entire cross axis


The attributes of internal elements are mainly the following:

order:The order of the project, the smaller the number, the closer, the bigger the rear row.

flex-grow:Magnification ratio (default:0)




Leave a Reply

Your email address will not be published. Required fields are marked *