HTML 
CSS 
PHP 
JavaScript 
SQL 
Bootstrap 
Solidity 
jQuery 
Git 
Chrome DevTools 
C++ 
Python Contents
How to justify content in a flex container
If the items do not fill the whole space available to them, you can use the CSS justify-content property to align them along the horizontal axis of the flex or grid container:
Example
div {
/* For Safari browsers */
display: -webkit-flex;
-webkit-justify-content: flex-end;
/* Standard */
display: flex;
justify-content: flex-end;
}Tip: to accomplish the same task on the vertical axis, use align-content.
CSS justify-content: syntax requirements
The syntax for CSS justify-content is as follows:
justify-content: value;
To define the value, you can use one of the keywords explained in the following section.
Pros Main Features
- Easy to use with a learn-by-doing approach
- Offers quality content
- Gamified in-browser coding experience
- The price matches the quality
- Suitable for learners ranging from beginner to advanced
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable
Pros Main Features
- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
- Nanodegree programs
- Suitable for enterprises
- Paid Certificates of completion
Pros Main Features
- A wide range of learning programs
- University-level courses
- Easy to navigate
- Verified certificates
- Free learning track available
- University-level courses
- Suitable for enterprises
- Verified certificates of completion
Property values
| Value | Description |
|---|---|
normal |
The default value. The items are positioned according to their default positions |
flex-start |
The items are positioned from the start of the container |
flex-end |
The items are positioned from the end of the container |
left |
The items are positioned at the left side of the container |
center |
The items are positioned at the center of the container |
right |
The items are positioned at the right side of the container |
space-around |
The items are positioned evenly with half-sized spaces on both ends of the container |
space-between |
The items are positioned evenly with no remaining space on both ends of the container |
space-evenly |
The items are positioned evenly with equal spacing around them in the container |
stretch |
The items are positioned evenly and the items with auto sizing are stretched to fit the container |
Browser support
Chrome
29+
Edge
12+
Firefox
20+
IE
11+
Opera
12.1+
Safari
9+
Mobile browser support
Chrome
29+
Firefox
20+
Opera
12.1+
Safari
9+
