justify-content - HTML CSS CSS Property

HTML CSS examples for CSS Property:justify-content

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. justify-content

Description

The justify-content CSS property sets how flex items are aligned along the main axis of the flex container.

The following table summarizes the justify-content Property.

Item Value
Default value: flex-start
Applies to:Flex containers
Inherited: No
Animatable: No.

Syntax

The syntax of the property is as follows: 


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

Property Values

The following table describes the values of this property.

ValueDescription
flex-startpacked toward the start of the line. This is default value.
flex-end packed toward the end of the line.
centerpacked toward the center of the line.
space-between evenly distributed along the line.
space-around evenly distributed so that the space between two adjacent items is the same.
initial Sets this property to its default value.
inherit take the value of its parent element justify-content property.

The example below shows the justify-content property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 justify-content Property</title>
  <style type="text/css">
  .flex-container {<!--  ww w.j  av a  2  s. c om-->
    height: 200px;
    width: 300px;
    font-size: 32px;
    border: 1px solid black;
    /* Safari */
    display: -webkit-flex;
    -webkit-justify-content: space-around;
    /* Standard syntax */
    display: flex;
    justify-content: space-around;
  }
  .flex-container div {
    width: 75px;
  }
  .item1 {
    background: #e84d51;
  }
  .item2 {
    background: #7ed636;
  }
  .item3 {
    background: #2f97ff;
  }
</style>
 </head>
 <body>
  <div class="flex-container">
   <div class="item1">
    1
   </div>
   <div class="item2">
    2
   </div>
   <div class="item3">
    3
   </div>
  </div>
 </body>
</html>

Related Tutorials