CSS Justify-content Properties of flexible elastic box model

Instance

Leave blank space around items in the <p> element of the Flex box object:

1. p

2. {

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

4. justify - content : space - around

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
 
    
 
 
    
 
 
    
 
 
    
 
 
    
 
 
   
 
   
 
    
Justify-content
 
    
29.0
21.0-webkit-
 
    
11.0
 
    
28.0
18.0-moz-
 
    
9.0
6.1-webkit-
 
    
17.0
 
   
 
  

 

 

Definition and usage

The justify-content is used to set or retrieve the alignment of the elastic box element in the direction of the spindle (horizontal axis).

Tip: Use the Align-content property to align the items (vertical) on the intersection axis.


 

 
  
 
   
 
    
 
 
    
flex-start 
 
   
 
   
 
    
 inherit: 
 
    
 no 
 
   
 
   
 
    
 can be animated: 
 
    
 No. See  CSS3 Animated Properties, CSS3 animated instances . 
 
   
 
   
 
    
 version: 
 
    
CSS3 
 
   
 
   
 
    
JavaScript Syntax:
 
    
object. style.justifycontent= "Space-between" effect preview
 
   
 
  

 


 

CSS syntax



Justify-content:flex-start|flex-end|center|space-between|space-around|initial|inherit;

Property value



 

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