CSS align-self Properties of flexible elastic box model

Instance

Center aligns an item within an Elastic object element:

1. # mybluep

2. {

3. align - self : center

4. }

<! 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-self
 
    
21.0
 
    
11.0
 
    
20.0
 
    
9.0
7.0-webkit-
 
    
12.1
 
   
 
  

 

 

Definition and usage

The Align-self property defines how the Flex subkey is aligned separately in the side axis (vertical axis) direction:

Note:The Align-self property overrides the Align-items property of the flexible container.


 

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

 


 

CSS syntax



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

Property value



 

 
  
 
   
 
    
 
 
    
 description  
 
    
 test  
 
   
 
   
 
    
auto  
 
    
 
 
    
 effect preview  
 
   
 
   
 
    
stretch  
 
    
 elements are stretched to fit the container.  
 
    
 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-self properties related articles please follow topic.alibabacloud.com!
 