Hurry! Try our new Interactive Courses for FREE. 🥳   🚀

CSS justify-self Property

The justify-self property in CSS is known for setting the way a box gets justified inside its alignment container along the appropriate axis. The effect of this property depends on the basis of the layout mode in which we are in.

In the case of block-level layouts, the items get aligned inside their containing block on the inline axis. In the case of the absolutely positioned elements, the items get aligned inside their containing block on the inline axis.

In the case of table cell layouts, and flexbox layouts this property gets ignored and in the case of grid layouts, the items get aligned inside their grid areas on the inline axis.

Syntax

justify-self: stretch | normal | auto | baseline | start | end | center | flex-start | flex-end | self-start | self-end | left | right | safe | unsafe

Example: CSS justify-self Property

In the example below, we are using the justify-self property to Justify our container block inside its alignment container along the correct axis. In this case, we have given the justify-self property value as start, center, and end. Hence, the blocks get aligned in a way according to the margin values specified by us.

<!DOCTYPE html>
<html>
<head>
	<title>The justify-self property in CSS</title>
	<style type="text/css">
		html {
	  font-family: helvetica, arial, sans-serif;
	  letter-spacing: 1px;
	}	
	article {
	  background-color: red;
	  display: grid;
	  grid-template-columns: 1fr 1fr;
	  grid-auto-rows: 40px;
	  grid-gap: 10px;
	  width: 300px;
	  justify-items: stretch;
	}	
	span:nth-child(2) {
	  justify-self: start;
	}	
	span:nth-child(3) {
	justify-self: center;
	}	
	span:nth-child(4) {
	justify-self: end;
	}	
	article span {
	  background-color: black;
	  color: white;
	  margin: 1px;
	  text-align: center;
	}	
	article, span {
	  padding: 10px;
	  border-radius: 7px;
	}	
	article {
	  margin: 20px;
	}
	</style>
</head>
<body>
	<article class="container"> <span>First child</span>
		<span>Second child</span>
		<span>Third child</span>
		<span>Fourth child</span>
	</article>
</body>
</html>

Output

Example 2: CSS justify-self Property

Here in this second example, we have given the justify-self property value as flex-end, self-end, self-start, and first baseline. So, the blocks get aligned according to the values specified by us, which can be seen in the output figure below.

<!DOCTYPE html>
<html>
<head>
	<title>The justify-self property in CSS</title>
	<style type="text/css">
		html {
	  font-family: helvetica, arial, sans-serif;
	  letter-spacing: 1px;
	}	
	article {
	  background-color: purple;
	  display: grid;
	  grid-template-columns: 1fr 1fr;
	  grid-auto-rows: 40px;
	  grid-gap: 10px;
	  width: 300px;
	  justify-self: flex-end;
	}	
	span:nth-child(2) {
	justify-self: self-end;
	}	
	span:nth-child(3) {
	justify-self: self-start;
	}	
	span:nth-child(4) {
	justify-self: first baseline;
	}	
	article span {
	  background-color: deeppink;
	  color: white;
	  margin: 1px;
	  text-align: center;
	}	
	article, span {
	  padding: 10px;
	  border-radius: 7px;
	}	
	article {
	  margin: 20px;
	}
	</style>
</head>
<body>
	<article class="container"> <span>First child</span>
		<span>Second child</span>
		<span>Third child</span>
		<span>Fourth child</span>
	</article>
</body>
</html>

Output

Live Example

Here in this live example, you can easily test the live coding and execute the example using different values or edit the coding and create your own example.

Browser Compatibility

The term browser compatibility indicates the ability of a particular website to appear fully functional on several browsers, available in the market. This means that the HTML coding of the website and the scripts on that website must be compatible to run on the browsers. It is of immense importance today when there is a large variety of web browsers available.

Name of Browser Background size contain and cover
Chrome 57 57
Edge 16 16
Firefox 45 45
Internet Explorer no no
Opera 44 44
Safari 10.1 10.1
Webview Android 57 57
Chrome Android 57 57
Firefox Android 45 45
Opera Android 43 43
IOS Safari 10.3 10.3
Samsung Internet 6.0 6.0

Conclusion

The initial value of the justify-items property in CSS is auto. It is applicable to the block-level boxes, the absolutely positioned boxes, and the grid items. It is not an inherited property. The computed value for this property is the as specified one.