CSS -CSS: Properties align-content

Fungsi properties align-content

The CSS align-content property controls alignment of a box’s content along the cross/block axis within its content box.

The alignment is similar to how justify-content aligns individual items, however, align-content aligns the whole line. It aligns flex lines within a multi-line flex container when there is extra space in the cross-axis.

To create a multi-line flex container apply flex-wrap with a value of either wrap or wrap-reverse.

Penulisan properties align-content

Value Penulisan properties align-content

  • flex-start Flex items are packed toward the start of the line.
  • flex-end Flex items are packed toward the end of the line.
  • center Flex items are packed toward the center of the line.
  • space-between Flex items are evenly distributed in the line.
  • space-around Same as space-between, but with half-size spaces on either end.
  • stretch Lines stretch to take up the remaining space. If the leftover free-space is negative, this value is identical to flex-start. Otherwise, the free-space is split equally between all of the lines, increasing their cross size.
  • initial Represents the value specified as the property’s initial value.
  • inherit Represents the computed value of the property on the element’s parent.
  • unset This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

Contoh penggunaan Penulisan properties align-content



Please enter your comment!
Please enter your name here