CSS Align Self

Align Self

The self-alignment of the align-items property in a grid or flex item can be superseded by a CSS declaration. Within Grid, it positions the element inside the grid area, while in Flexbox, it aligns the item along the cross-axis.

This property does not apply to table cells and block-level elements. When the cross-axis margin of a flex item is set to auto, align-self is ignored.

Syntax

CSS
/* Keyword values */
align-self: auto;
align-self: normal;

/* Positional alignment */
/* align-self does not take left and right values */
align-self: center; /* Put the item around the center */
align-self: start; /* Put the item at the start */
align-self: end; /* Put the item at the end */
align-self: self-start; /* Align the item flush at the start */
align-self: self-end; /* Align the item flush at the end */
align-self: flex-start; /* Put the flex item at the start */
align-self: flex-end; /* Put the flex item at the end */

/* Baseline alignment */
align-self: baseline;
align-self: first baseline;
align-self: last baseline;
align-self: stretch; /* Stretch 'auto'-sized items to fit the container */

/* Overflow alignment */
align-self: safe center;
align-self: unsafe center;

/* Global values */
align-self: inherit;
align-self: initial;
align-self: revert;
align-self: revert-layer;
align-self: unset;

Values

1. Auto

equals the align-items property value of the containing element.

1. Standard

This keyword's impact varies according to the layout mode we're in:

• ✅ The keyword in absolutely-positioned layouts acts as a stretch on all other absolutely-positioned boxes and as a start on substituted absolutely-positioned boxes.
• ✅ The keyword behaves as a stretch in absolutely positioned layouts in a static position.
• ✅ In the case of flex items, the term acts like a stretch.
• ✅ This keyword causes a behavior for grid items that are like stretch, with the exception of boxes that have intrinsic sizes or an aspect ratio, in which case it acts like a start.
• ✅ This attribute does not cover table cells and block-level boxes.

1. Self-start

positions the items so that their beginning edge on the perpendicular axis aligns perfectly with the boundary of the alignment container.

1. Self-end

aligns the items so that their trailing edges in the perpendicular axis align with the container's edge.

1. Flex-start

The cross-start margin edge of the flex item aligns with the cross-start edge of the line.

1. Flex-end

The cross-end margin edge of the flex item aligns with the cross-end edge of the line.

1. Middle

The margin box of the flex item aligns at the center of the cross-axis line. If the item's cross-size exceeds the flex container's limit, it will overflow evenly in both directions.

1. Root, initial baseline, last baseline

Declares the intention of a box to engage in either first- or last-baseline alignment, where the initial or final baseline alignment of the box is synchronized with the matching baseline in the common first or last baseline set of all boxes within its baseline-sharing cluster. When targeting the first baseline, the alignment process commences, while for the last baseline, it concludes.

1. Stretch

The dimensions of the item are expanded uniformly (as opposed to in proportion) within the constraints set by max-height/max-width (or similar feature) in cases where the cumulative size of items along the perpendicular axis is smaller than the alignment container's dimensions, and the item is set to auto size. This guarantees that all auto-sized items perfectly occupy the alignment container's length on the cross-axis.

1. Secure

The element will be positioned as if the alignment mode had been initiated in case its dimensions surpass those of the alignment container.

1. Risky

The designated alignment setting is honored regardless of the varying dimensions of the element and alignment container.

Formal Definition

• ✅ Initial value: Auto
• ✅ Applies to: Flex items, grid items, and absolutely-positioned boxesNot
• ✅ Inherited: No
• ✅ Computed value: Auto computes to start if the box has no parent and to the computed value of align-items on the parent (less any legacy keywords) on all other boxes. It also computes itself on absolutely-positioned elements. The layout model determines its actions, as justify-self explains. Alternatively, the given value.

Formal syntax:

Example
Copy
align-self = 
  auto                                  |
  normal                                |
  stretch                               |
  <baseline-position>                   |
  <overflow-position>? <self-position>  |
  anchor-center                         

<baseline-position> = 
  [ first | last ]?  &&
  baseline           

<overflow-position> = 
  unsafe  |
  safe    

<self-position> = 
  center      |
  start       |
  end         |
  self-start  |
  self-end    |
  flex-start  |
  flex-end
Try it Yourself

Examples

Example
Copy
Play
<section>
  <div>Item #1</div>
  <div>Item #2</div>
  <div>Item #3</div>
</section>
Try it Yourself
Example
Copy
Play
Copy to Clipboard
section {
  display: flex;
  align-items: center;
  height: 120px;
  background: beige;
}

div {
  height: 60px;
  background: cyan;
  margin: 5px;
}

div:nth-child(3) {
  align-self: flex-end;
  background: pink;
}
Try it Yourself