current position:Home>Introduction to flex flexible layout in CSS -- learning notes

Introduction to flex flexible layout in CSS -- learning notes

2021-08-26 17:39:51 Hawthorn piece

flex Layout experience

Traditional layout and Flex Layout

Traditional layout

  • Compatibility is good.
  • Complicated layout
  • limitations , You can't move the end any more. Good layout

Flex Layout

  • It is easy to operate , The layout is extremely simple , Mobile applications are very wide
  • PC The end browser support is poor
  • IE 11 Or earlier , Not supported or only partially supported


1.  If it is PC End page layout , We still have the traditional layout .
2.  If it is a mobile terminal or does not consider the compatibility problem PC End page layout , We still use flex Elastic layout 

flex Layout principle

flex yes flexible Box Abbreviation , Meaning for " Elastic layout ", To provide maximum flexibility for box models
Any container can be specified as flex Layout .

  • When we set... For the parent box flex After attribute , The child element float、clear and vertical-align Property will fail
  • summary :flex The principle summary of layout is : By adding... To the parent box flex attribute , To control the position and arrangement of sub boxes .

flex Layout parent common properties

 (1) Main shaft and side shaft 
     stay flex Layout , It is divided into two directions: the main axis and the side axis , The same name has rows and columns 、x Axis and y Axis 
    *  The default spindle direction is x Axis direction , Horizontal right 
    *  The default direction of the side axis is y Axis direction , Vertically down 

 (2)flex-direction  Set the direction of the spindle ( That is, the arrangement of items )
      Be careful : The main shaft and the side shaft change , Just look flex-direction Set sleep as spindle , The rest is the side shaft .
            And our child elements are arranged according to the principal axis .
Property value explain
row The default is left to right ( The main axis is x Axis )
row-reverse From right to left ( The main axis is x Axis )
column From top to bottom ( The main axis is y Axis )
row-reverse From bottom to top ( The main axis is y Axis )

 (3) justify-content  Set the arrangement of sub elements on the spindle 
      justify-content  Property defines how items are arranged on the spindle 
       Be careful : Set up justify-content Before attributes , Be sure to determine which spindle is first 
Property value explain
flex-start The main axis is x Axis The arrangement is from left to right The spindle is y Axis The arrangement is from top to bottom
flex-end The main axis is x Axis The arrangement is from right to left The spindle is y Axis The arrangement is from bottom to top
center Align in the center of the spindle ( The spindle is x Axis Horizontal center The spindle is y Axis Vertical center )
space-around Divide the remaining space equally
space-between We'll stick the edges on both sides first Divide the rest of the space equally ( important )

 (4) flex-wrap  Set whether the child element should wrap 
     By default , The child elements are all arranged on the same line ( namely x Axis or y axis ).
     But sometimes there are too many child elements , We want the child elements to wrap , You need to set flex-wrap The attribute is 
Property value explain
nowrap The default value is Don't wrap
wrap Line break

  (5)align-items  Set the arrangement of child elements on the side axis ( A single  )   
Property value explain
flex-start The default value is From top to bottom
flex-end From bottom to top
center Huddled together in the middle ( Vertical center )
stretch The tensile

 (6)align-content  Set the arrangement of the child elements on the side axis ( Multiple lines )
       Be careful :align-content Property can only be used when a child item breaks a line , There is no effect in the case of a single line 
Property value explain
flex-start The default value is arranged at the head of the side axis
flex-end Start at the end of the side axis
center Show... In the middle of the side axis
space-around Children divide the remaining space equally on the side axis
space-between The subitems are first distributed at both ends on the side axis , Divide the rest of the space equally
stretch Sets the height of the child element and bisects the height of the parent element

  (7)align-content  and  align-items  difference 

      * align-items  It is suitable for single line ,  Only top alignment 、 Lower alignment 、 Center and   The tensile 
      * align-content  Adapt to line breaks ( Multiple lines ) Under the circumstances ( Invalid in single line case ), 
         You can set   Top alignment 、  Next pair   Qi 、 In the middle 、 Stretch and evenly allocate the remaining space .
      *  To sum up is to look for  align-items  Find more lines  align-content

       flex-flow  The attribute is  flex-direction  and  flex-wrap  Composite properties of properties 
       flex-flow:row wrap;

flex Common properties of layout subitems

(1)flex  Number of copies of sub items 
    flex  Property defines the remaining space allocated by the subproject , use flex To show how many copies .
.item {
  flex: <number>; /* default 0 */
(2)align-self  The way the items are arranged on their own side 

    align-self  Property allows a single item to have a different alignment than other items , covering  align-items  attribute .
     The default value is  auto, Represents the... That inherits the parent element  align-items  attribute , If there is no parent element , Is equivalent to  stretch.
 span:nth-child(2) {
  /*  Set your own arrangement on the side axis  */
  align-self: flex-end;
(3)order Property defines the order in which children are arranged ( The order before and after )
     The smaller the numerical , The further up the line , The default is 0.
     Be careful : and  z-index  Dissimilarity .
.item {
  order: <number>;

flex The layout is vertically and horizontally centered ( A single )

The actual project address of this paper :

This document and actual project are from Learn in this video , Here as a note , Share with you , I hope that's helpful .

copyright notice
author[Hawthorn piece],Please bring the original link to reprint, thank you.