Css3 flexible box model flex Quick Start and get started (align-content and align-items), css3align-content

Css3 flexible box model flex Quick Start and get started (align-content and align-items), css3align-content

Next we will continue with the Quick Start and getting started with the css3 flexible box model flex above. There are still two attributes of the parent container align-items and align-content.

1. align-content: multi-row sub-axis alignment

Description	Multi-row sub-axis alignment
Optional Value	stretch | flex-start | center | flex-end | space-between | space-around
Default Value	stretch

Attribute defines the alignment of Multiple Axes. This attribute does not work if the project has only one axis.

That is, this attribute is only available in the flex containerMultiple rowsFlex elements.

1 <! DOCTYPE html> 2 Flex-direction: row; flex-wrap: wrap; align-content: flex-start;
Flex-direction: row; flex-wrap: wrap; align-content: flex-end;
 
Flex-direction: row; flex-wrap: wrap; align-content: center;
 
Flex-direction: row; flex-wrap: wrap; align-content: stretch; When align-content is set to stretch, the height of the sub-element of the container is changed to auto, do not set a fixed height to see the stretching effect # box div {width: 100px; height: auto; background: # 09f; margin: 10px ;}
 
Flex-direction: row; flex-wrap: wrap; align-content: space-;
Flex-direction: row; flex-wrap: wrap; align-content: space-around;
 
Flex-direction: column; flex-wrap: wrap; align-content: space-around;
Convert flex-direction to column direction.

Summary: This attribute must have multiple lines of flex elements, otherwise it will not be able to see the effect, that is, it should be combined with flex-wrap: wrap; so that the flex element can see the effect only when it comes to line feed.
Align-items: single-line sub-axis alignment

 

 
  
 
   
 
    
Description
 
    
Secondary axis alignment of a single row
 
   
 
   
 
    
Optional Value
 
    
flex-start | flex-end | center | stretch | baseline
 
   
 
   
 
    
Default Value
 
    
stretch
 
   
 
  

 
1 <! DOCTYPE html> 2 Flex-direction: row; align-items: flex-end;
 
Flex-direction: row; align-items: flex-start;
Flex-direction: row; align-items: center;
 
Flex-direction: row; align-items: baseline; baseline: align the baseline of the first flex element text # box div: nth-of-type (1) {padding-top: 50px;} flex-direction: row; align-items: stretch; set the height of all flex elements to auto, or remove them to see the effect of stretch: # box div {width: 100px; height: auto; background: # 09f; margin: 10px; box-sizing: border-box ;}