CSS place-content egenskab

Definition og brug

place-content Egenskaber bruges til fleksible boks (flexbox) og raster (grid) layout og er kortform for følgende egenskaber:

place-content: start center;

place-content: end;

Derved er værdierne for align-content og justify-content attributterne begge 'end'

Specificer fleksibilitet i bunden af fleksible beholder og jævne afstande mellem fleksible elementer i lodret retning:

#container {
  display: flex;
  place-content: end space-between;
}

Extra space in the block direction is evenly distributed around each grid item, and the grid items are centered in the inline direction:

#container {
  display: grid;
  place-content: space-around center;
}

place-content: normal|value|initial|inherit;

Value	Description
normal	Default Value. Depends on the layout context. Is equivalent to not setting properties for align-content and justify-content.
stretch	Grid: If the size is not set, the grid item will stretch to fill the grid container. Flexbox: If the flex item does not specify a size on the cross axis, it will stretch on the cross axis to fill the flex container.
start	Aligns items to the start position of the container.
end	Aligns items to the end position of the container.
center	Aligns items to the center position of the container.
space-between	Distributes available space evenly along the two axes of the container, making the spacing between items equal.
space-around	Distributes available space evenly along the two axes of the container, making the spacing around each item equal.
space-evenly	Distributes items evenly along the two axes of the container.
overflow-alignment	'safe': If the content overflows, the item alignment is set to 'start'. 'unsafe': The alignment value is kept unchanged regardless of whether the content of the item overflows.
initial	Sets this property to its default value. See: initial.
inherit	Inherits this property from its parent element. See: inherit.

Default Value:	normal
Inheritance:	No
Animation Creation:	Not supported. See:Animation-related Properties.
Version:	CSS3
JavaScript Syntax:	object.style.placeContent="end space-around"