Skip to main content

34 Cross

Almanac

flex-basis

The flex-basis property is a sub-property of the Flexible Box Layout module.

It specifies the initial size of the flex item, before any available space is distributed according to the flex factors. When omitted from the flex shorthand, its specified value is the length zero.

A flex-basis value set to auto sizes the element according to its size property (which can itself be the keyword auto, which sizes the element based on its contents).

Syntax
flex-basis: <width>

.flex-item 
Read article
Almanac

align-self

The align-self property is a sub-property of the Flexible Box Layout module.

It makes possible to override the align-items value for specific flex items.

The align-self property accepts the same 5 values as the align-items:

  • flex-start: cross-start margin edge of the item is placed on the cross-start line
  • flex-end: cross-end margin edge of the item is placed on the cross-end line
  • center: item is centered in the cross-axis
  • baseline: items are aligned such as
Read article
Almanac

justify-content

The justify-content property is a sub-property of the Flexible Box Layout module.

It defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

The justify-content property accepts five different values:

  • flex-start (default): items are packed toward the start
Read article
icon-link icon-logo-star icon-search icon-star