CSS Align-items Properties of flexible elastic box model

Instance

Align the <p> elements of the elastic box in the center:

1. p

2. {

3. display : Flex Span class= "pun" style= "Color: #93a1a1" ";

4. align - Span class= "PLN" style= "color: #48484c" >items : center ;

5. }

<! DOCTYPE html>
Effect Preview


 

Browser support

The number in the table represents the version number of the first browser that supports the property.

The number immediately following the-webkit-,-ms-or-moz-is the first version that supports the prefix attribute.


 

 
  
 
   
 
    
Properties
 
    
 
 
    
 
 
    
 
 
    
 
 
    
 
 
   
 
   
 
    
Align-items
 
    
21.0
 
    
11.0
 
    
20.0
 
    
9.0
7.0-webkit-
 
    
12.1
 
   
 
  

 

 

Definition and usage

The Align-items property defines the alignment of the Flex subkey in the side axis (vertical axis) direction of the current line of the Flex container.

Tip: Use the Align-self property of each Elastic object element to override the Align-items property.


 

 
  
 
   
 
    
 
 
    
stretch 
 
   
 
   
 
    
 inherit: 
 
    
 no 
 
   
 
   
 
    
 can be animated: 
 
    
 No. See  CSS3 Animated Properties, CSS3 animated instances . 
 
   
 
   
 
    
 version: 
 
    
CSS3 
 
   
 
   
 
    
JavaScript Syntax:
 
    
object. style.alignitems= "Center" effect preview
 
   
 
  

 


 

CSS syntax



Align-items:stretch|center|flex-start|flex-end|baseline|initial|inherit;

Property value



 

 
  
 
   
 
    
 
 
    
 description  
 
    
 test  
 
   
 
   
 
    
stretch  
 
    
 
 
    
 effect preview  
 
   
 
   
 
    
center  
 
    
 
 
    
 effect preview  
 
   
 
   
 
    
flex-start  
 
    
 
 
    
 effect preview  
 
   
 
   
 
    
flex-end  
 
    
 
 
    
 effect preview  
 
   
 
   
 
    
baseline  
 
    
 
 
    
 effect preview  
 
   
 
   
 
    
initial  
 
    
 Set this property to its default value. See initial.  
 
    
 effect preview  
 
   
 
   
 
    
Inherit
 
    
Inherit the property from the parent element. See Inherit.
 
    

 
   
 
  

 
More flexible elastic box model CSS Align-items properties related articles please follow topic.alibabacloud.com!
