CSS place-content Property
The CSS place-content property is the shorthand of align-content and justify-content property. The shorthand properties in CSS means that you can set the multiple properties values in a single property. Here the place-content property can hold the value of the align-content and justify-content property values.
Syntax:
place-content: align-content-property-value justify-content-property-value
Property Values: This property accepts all the possible combination values that can make by the align-content and justify-content property values.
- start: This property is used to align flex items from the start of the container.
- end: This property is used to align flex items from the end of the container.
- flex-start: This property displays the lines at the start of the flex container.
- flex-end: This property displays the flex lines at the end of the flex container.
- center: This property aligns flex items at the center of the container.
- space-around: This property distribute space equally around the flex lines.
- space-between: This property distribute flex lines space with equal space between them.
- space-evenly: This property defines the position with equal spacing between them but the spacing from corners differs.
- stretch: This property defines the line stretched to take the remaining space of the flex container. It is the default value.
Below examples illustrate the CSS place-content property:
Example 1: In this example, we will use the following place-content property values: flex-start center.
HTML
<!DOCTYPE html> < html > < head > < title >CSS place-content Property</ title > < style > h1 { color: green; } #container { display: flex; height: 200px; width: 460px; flex-wrap: wrap; background-color: gray; /* Setting property values */ place-content: flex-start center; } div>div { border: 2px solid black; width: 60px; background-color: green; color: white; } .short { font-size: 12px; height: 30px; } .tall { font-size: 14px; height: 40px; } </ style > </ head > < body > < center > < h1 >w3wiki</ h1 > < b >CSS place-content Property</ b > < div id = "container" > < div class = "short" >Beginner</ div > < div class = "short" > Computer< br /> Science </ div > < div class = "tall" > Beginner< br /> for </ div > < div class = "tall" > Portal< br /> for </ div > < div class = "tall" ></ div > </ div > </ center > </ body > </ html > |
Output:
Example 2: Here we will use place-content: flex-start start property value.
HTML
<!DOCTYPE html> < html > < head > < title >CSS place-content Property</ title > < style > h1 { color: green; } #container { display: flex; height: 100px; width: 460px; flex-wrap: wrap; background-color: gray; /* place-content can be changed in the live sample */ place-content: flex-start start; } div>div { border: 2px solid black; width: 60px; background-color: green; color: white; } .short { font-size: 12px; height: 30px; } .tall { font-size: 14px; height: 40px; } </ style > </ head > < body > < center > < h1 >w3wiki</ h1 > < b >CSS place-content Property</ b > < div id = "container" > < div class = "short" >Beginner</ div > < div class = "short" > Computer< br /> Science </ div > < div class = "tall" > Beginner< br /> for </ div > < div class = "tall" > Portal< br /> for </ div > < div class = "tall" ></ div > </ div > </ center > </ body > </ html > |
Output:
Example 3: Here we will use the place-content: flex-end end property value.
HTML
<!DOCTYPE html> < html > < head > < title >CSS place-content Property</ title > < style > h1 { color: green; } #container { display: flex; height: 100px; width: 460px; flex-wrap: wrap; background-color: gray; /* place-content can be changed in the live sample */ place-content: flex-end end; } div>div { border: 2px solid black; width: 60px; background-color: green; color: white; } .short { font-size: 12px; height: 30px; } .tall { font-size: 14px; height: 40px; } </ style > </ head > < body > < center > < h1 >w3wiki</ h1 > < b >CSS place-content Property</ b > < div id = "container" > < div class = "short" >Beginner</ div > < div class = "short" > Computer< br /> Science </ div > < div class = "tall" > Beginner< br /> for </ div > < div class = "tall" > Portal< br /> for </ div > < div class = "tall" ></ div > </ div > </ center > </ body > </ html > |
Output:
Supported Browsers:
- Google Chrome 59
- Edge 79
- Firefox 45
- Opera 46
- Safari 9
Contact Us