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 >GeeksforGeeks</ h1 >
< b >CSS place-content Property</ b >
< div id = "container" >
< div class = "short" >Geeks</ div >
< div class = "short" >
Computer< br />
Science
</ div >
< div class = "tall" >
Geeks< 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 >GeeksforGeeks</ h1 >
< b >CSS place-content Property</ b >
< div id = "container" >
< div class = "short" >Geeks</ div >
< div class = "short" >
Computer< br />
Science
</ div >
< div class = "tall" >
Geeks< 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 >GeeksforGeeks</ h1 >
< b >CSS place-content Property</ b >
< div id = "container" >
< div class = "short" >Geeks</ div >
< div class = "short" >
Computer< br />
Science
</ div >
< div class = "tall" >
Geeks< 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
Last Updated :
29 Aug, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...