revision:
- is used in flexbox and layouts, and is a shorthand property for the following properties: "align-content", "justify-content".
If the place-content property has two values: {place-content: start center;} : align-content property value is 'start', justify-content property value is 'center'.
If the place-content property has one value : {place-content: end;} : align-content and justify-content property values are both 'end'
Property values:
normal : default value. Dependant on layout context. The same as setting no property value for align-content and justify-content.
stretch : "Grid": stretches items to fill the container if size is not set. "Flexbox": stretches flex items on the cross axis to fill the flex container if flex items have no specified size on the cross axis.
start : align items at the start of the container
end : align items at the end of the container
center : align items to the center of the container
space-between : distribute available extra space evenly between the elements inside the container on both axis.
space-around : distribute available extra space evenly around each element inside the container on both axis.
space-evenly : distribute elements inside the container evenly on both axis.
overflow-alignment : 'safe' sets alignment of the item to 'start' if the content overflows; 'unsafe' keeps the alignment value regardless of wether or not the item content overflows.
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
example: place-content property
Resize window to see the effect more clearly. The flex lines are placed at the bottom of the container in the column direction, and the flex items are aligned with the same space between them in the row direction.
<div>
<p>Resize window to see the effect more clearly. The flex lines are placed at the bottom
of the container in the column direction, and the flex items are aligned with the same space
between them in the row direction.</p>
<div id="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<style>
#container {height: 8dvw; width: 60%; border: solid black 0.1vw; display: flex; flex-wrap: wrap;
place-content: end space-between;}
#container > div {flex-basis: 2vw; height: 2vw; margin: 0.2vw; background-color: coral;}
</style>
- is used in layouts, and is a shorthand property for the following properties: "align-items", "justify-items".
If the place-items property has two values: {place-item: start center;} : align-items property value is 'start', justify-items property value is 'center'.
If the place-items property has one value : {place-items: end;} : align-items and justify-items property values are both 'end'
Property values:
normal legacy : default. The element's default place-items value. The default value for align-items is 'normal', and the default value for justify-items is 'legacy'.
baseline : items are positioned at the baseline of the container
center : align items to the center of the cell
end : align items at the end of the cell
start : align items at the start of the cell
stretch : stretches items to fill the container if the item sizes are not set.
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
example: place-items property
The value 'start' set for the place-items property is the same as setting 'start' to both the align-items and justify-items properties. This means that each item is placed within their cell at the start in the block direction and at the start in the inline direction.
<div>
<p>The value 'start' set for the place-items property is the same as setting 'start' to both
the align-items and justify-items properties. This means that each item is placed within
their cell at the start in the block direction and at the start in the inline direction.</p>
<div id="container-A">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<style>
#container-A { width: 60%; aspect-ratio: 3/2; border: solid black 0.1vw; display: grid;
grid-template-columns: 1fr 1fr;grid-template-rows: 1fr 1fr; place-items: start;}
#container-A > div { width: 60%; aspect-ratio: 2; background-color: coral;}
</style>
- is used to align individual items, and is a shorthand property for the following properties: "align-self", "justify-self".
If the place-self property has two values: {place-self: start center;} : align-self property value is 'start', justify-self property value is 'center'.
If the place-self property has one value : {place-self: end;} : align-self and justify-self property values are both 'end'
Property values:
auto : default. The element's default place-self value.
normal : dependent on layout context, but similar to 'stretch' for layout for items when size is not set. If size is set, the property value behaves like 'start'.
stretch : stretches to fill the cell if size is not set.
start : align items at the start in the inline and block directions
left : align items to the left in the inline direction, as the justify-self property value.
center : align items to the center
end : align items at the end in the inline and block directions
right : align items to the right in the inline direction, as the justify-self property value.
overflow-alignment :'safe' sets alignment of the item to 'start' if the content overflows; 'unsafe' keeps the alignment value regardless of wether or not the item content overflows.
baseline alignment : the element is aligned with the baseline of the parent.
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
example: place-self property
Place an individual item in the block and inline directions with the place-self property.
<div>
<p>Place an individual item in the block and inline directions with the place-self property.</p>
<div id="container-B">
<div></div>
<div id="myDiv"></div>
<div></div>
<div></div>
</div>
</div>
<style>
#container-B { width: 60%; aspect-ratio: 3/2; border: solid black 0.1vw; display: grid;
grid-template-columns: 1fr 1fr;}
#container-B > div { width: 60%; aspect-ratio: 2; margin: 0.2vw; background-color: coral;}
#myDiv {border: solid black 0.3vw; place-self: end;}
</style>