Flexbox Justify-Content

The CSS3 justify-content property is used to define the alignment along the main axis. It is a sub-property of CSS3 Flexbox layout module.

It sets the Flexbox container's item horizontally when the items don?t use all the available space on the main axis.

Its possible values are:

flex-start:It is the default value. It sets the items at the beginning of the container
flex-end:It sets the items at the end of the container.
Center:It sets the items at the center of the container.
space-between:It sets the items with space between the lines.
space-around:It sets the items with space before, between, and after the lines.

Let's take some example.

See this example:

Example1: (Use of Flex-end value)

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    width: 400px;
    height: 200px;
    background-color: lightpink;
}
.flex-item {
    background-color: brown;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>
</div>
</body>
</html>

Test it Now

Example2: (Use of Center value)

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    width: 400px;
    height: 200px;
    background-color: lightpink;
}
.flex-item {
    background-color: brown;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>
</div>
</body>
</html>

Test it Now

Exmple3: (Use of space-between value)

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width: 400px;
    height: 200px;
    background-color: lightpink;
}
.flex-item {
    background-color: brown;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>
</div>
</body>
</html>

Test it Now

Example4: (Use of space-around value)

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    width: 400px;
    height: 200px;
    background-color: lightpink;
}
.flex-item {
    background-color: brown;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>
</div>
</body>
</html>

Test it Now

Next TopicFlexbox Align-Items property

← prev next →