Flexbox

Human CSS expects most layout to be done using flexbox, and provides the flex micro-attribute to control them. The micro-attribute values available include ones to control direction, wrapping, and alignment. You’ll no longer need to struggle with trying to remember the names or meanings or values of properties like align-items.

Examples of flexbox:

<div flex="wrap">
  <div self="one-third">
  <div self="one-third">
  <div basis one-third>
</div>

<div flex="y justify center"></div>

Flexbox is specified using the flex micro-attribute. The direction is specified by values of x or y. Other aspects of the flexbox may be controlled by the micro-attribute values wrap, reverse, and inline.

Justification along the main axis is specified by justify and justify-gap micro-attrihute values. Alignment of items is controlled by top, middle, bottom, left, center, and right micro-attribute values, which are always interpreted in the correct way depending on the flexbox direction . Individual items can be controlled by the self micro-attribute, with vlaues such as no-shrink, as well as top, middle, bottom, left, center, right, stretch, and baseline micro-attribute valuess.