CSS Box Alignment | CSS Features

`align-content`

Property Baseline: widely availablesince March 2018 Modern CSS: align-content in block layouts

MDN The CSS align-content property sets the distribution of space between and around content items along a flexbox's cross axis, or a grid or block-level element's block axis.

Live preview Example from MDN

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-template-columns: 60px 60px;
  grid-auto-rows: 40px;
  column-gap: 10px;
  height: 180px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
    </div>
  </div>
</section>

Syntax

normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-position>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: normal
Applies to: block containers, multicol containers, flex containers, and grid containers
Inherited: no
Percentages: n/a
Computed value: specified keyword(s)
Canonical order: per grammar
Animation type: discrete

Browser support

First browser version supporting align-content
Chrome	29
Edge	12
Firefox	28
Safari	9
Chrome Android	29
Safari iOS	9

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`align-items`

Property Baseline: widely availablesince March 2018 Modern CSS: Anchor positioning

MDN The CSS align-items property sets the align-self value on all direct children as a group. In flexbox, it controls the alignment of items on the cross axis. In grid layout, it controls the alignment of items on the block axis within their grid areas.

Live preview Example from MDN

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  width: 200px;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 80px;
  grid-gap: 10px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
    </div>
  </div>
</section>

Syntax

normal | stretch | <baseline-position> | <overflow-position>? <self-position>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: normal
Applies to: all elements
Inherited: no
Percentages: n/a
Computed value: specified keyword(s)
Canonical order: per grammar
Animation type: discrete

Browser support

First browser version supporting align-items
Chrome	29
Edge	12
Firefox	20
Safari	9
Chrome Android	29
Safari iOS	9

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`align-self`

Property Baseline: widely availablesince March 2018 Modern CSS: Anchor positioning

MDN The align-self CSS property overrides a grid or flex item's align-items value. In grid, it aligns the item inside the grid area. In flexbox, it aligns the item on the cross axis.

Live preview Example from MDN

.example-container {
  border: 1px solid #c5c5c5;
  display: grid;
  width: 200px;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 80px;
  grid-gap: 10px;
}

.example-container > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">One</div>
    <div>Two</div>
    <div>Three</div>
  </div>
</section>

Syntax

auto | <overflow-position>? [ normal | <self-position> ]| stretch | <baseline-position> | anchor-center

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: auto
Applies to: flex items, grid items, and absolutely-positioned boxes
Inherited: no
Percentages: n/a
Computed value: specified keyword(s)
Canonical order: per grammar
Animation type: discrete

Browser support

First browser version supporting align-self
Chrome	29
Edge	12
Firefox	20
Safari	9
Chrome Android	29
Safari iOS	9

First version with support, from MDN browser-compat-data.

Specification ↗ Extended in css-anchor-position-1 ↗ MDN reference ↗

`justify-content`

Property Baseline: widely availablesince March 2018

MDN The CSS justify-content property defines how the browser distributes space between and around content items along the main axis of a flex container and the inline axis of grid and multicol containers.

Live preview Example from MDN

#example-element {
  border: 1px solid #c5c5c5;
  width: 220px;
  display: grid;
  grid-template-columns: 60px 60px;
  grid-auto-rows: 40px;
  row-gap: 10px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
    </div>
  </div>
</section>

Syntax

normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: normal
Applies to: multicol containers, flex containers, and grid containers
Inherited: no
Percentages: n/a
Computed value: specified keyword(s)
Canonical order: per grammar
Animation type: discrete

Browser support

First browser version supporting justify-content
Chrome	29
Edge	12
Firefox	20
Safari	9
Chrome Android	29
Safari iOS	9

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`justify-items`

Property Baseline: widely availablesince March 2018 Modern CSS: Anchor positioning Modern CSS: justify-self in block layouts

MDN The CSS justify-items property defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis.

Live preview Example from MDN

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 40px;
  grid-gap: 10px;
  width: 220px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
    </div>
  </div>
</section>

Syntax

normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ] | legacy | legacy && [ left | right | center ]

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: legacy
Applies to: all elements
Inherited: no
Percentages: n/a
Computed value: specified keyword(s), except for legacy (see prose)
Canonical order: per grammar
Animation type: discrete

Browser support

First browser version supporting justify-items
Chrome	52
Edge	12
Firefox	20
Safari	9
Chrome Android	52
Safari iOS	9

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`justify-self`

Property Baseline: widely availablesince April 2020 Modern CSS: Anchor positioning Modern CSS: justify-self in block layouts

MDN The CSS justify-self property sets the way a box is justified inside its alignment container along the appropriate axis.

Live preview Example from MDN

.example-container {
  border: 1px solid #c5c5c5;
  display: grid;
  width: 220px;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 40px;
  grid-gap: 10px;
}

.example-container > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">One</div>
    <div>Two</div>
    <div>Three</div>
  </div>
</section>

Syntax

auto | <overflow-position>? [ normal | <self-position> | left | right ] | stretch | <baseline-position> | anchor-center

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: auto
Applies to: block-level boxes, absolutely-positioned boxes, and grid items
Inherited: no
Percentages: n/a
Computed value: specified keyword(s)
Canonical order: per grammar
Animation type: discrete

Browser support

First browser version supporting justify-self
Chrome	57
Edge	16
Firefox	45
Safari	10.1
Chrome Android	57
Safari iOS	10.3

First version with support, from MDN browser-compat-data.

Specification ↗ Extended in css-anchor-position-1 ↗ MDN reference ↗

`place-content`

Property Baseline: widely availablesince March 2018

MDN The place-content CSS shorthand property allows you to align content along both the block and inline directions at once (i.e., the align-content and justify-content properties) in a relevant layout system such as Grid or Flexbox.

Live preview Example from MDN

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-template-columns: 60px 60px;
  grid-auto-rows: 40px;
  height: 180px;
  width: 220px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
    </div>
  </div>
</section>

Syntax

<'align-content'> <'justify-content'>?

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: normal
Applies to: see individual properties
Inherited: no
Percentages: n/a
Computed value: see individual properties
Canonical order: per grammar
Animation type: discrete
Longhands: align-content, justify-content

Browser support

First browser version supporting place-content
Chrome	59
Edge	79
Firefox	45
Safari	9
Chrome Android	59
Safari iOS	9

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`place-items`

Property Baseline: widely availablesince March 2018 Modern CSS: Anchor positioning

MDN The place-items CSS shorthand property aligns items along both block and inline directions at the same time.

Live preview Example from MDN

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 80px;
  grid-gap: 10px;
  width: 220px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
    </div>
  </div>
</section>

Syntax

<'align-items'> <'justify-items'>?

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: see individual properties
Applies to: all elements
Inherited: no
Percentages: n/a
Computed value: see individual properties
Canonical order: per grammar
Animation type: discrete
Longhands: align-items, justify-items

Browser support

First browser version supporting place-items
Chrome	59
Edge	79
Firefox	45
Safari	11
Chrome Android	59
Safari iOS	11

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`place-self`

Property Baseline: widely availablesince March 2018 Modern CSS: Anchor positioning

MDN The place-self CSS shorthand property allows you to align an individual item in both the block and inline directions at once (i.e., the align-self and justify-self properties). This property applies to block-level boxes, absolutely-positioned boxes, and grid items. If the second value is not present, the first value is also used for it.

Live preview Example from MDN

.example-container {
  border: 1px solid #c5c5c5;
  display: grid;
  width: 220px;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 80px;
  grid-gap: 10px;
}

.example-container > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">One</div>
    <div>Two</div>
    <div>Three</div>
  </div>
</section>

Syntax

<'align-self'> <'justify-self'>?

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: auto
Applies to: see individual properties
Inherited: no
Percentages: n/a
Computed value: see individual properties
Canonical order: per grammar
Animation type: discrete
Longhands: align-self, justify-self

Browser support

First browser version supporting place-self
Chrome	59
Edge	79
Firefox	45
Safari	11
Chrome Android	59
Safari iOS	11

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`<baseline-position>`

Type Not in any browser yet

MDN The <baseline-position> enumerated value type represents the baseline keyword values and first and last modifiers, used for the align-content, align-items, align-self, justify-items and justify-self properties as well as the place-content, place-items, and place-self shorthand properties.

Syntax

[ first | last ]? && baseline

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Specification ↗ MDN reference ↗

`<content-distribution>`

Type Not in any browser yet

MDN The <content-distribution> enumerated value type is used by justify-content and align-content properties, and the place-content shorthand, to distribute a container's extra space among its alignment subjects.

Syntax

space-between | space-around | space-evenly | stretch

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Specification ↗ MDN reference ↗

`<content-position>`

Type Not in any browser yet

MDN The <content-position> enumerated value type is used by justify-content and align-content properties, and the place-content shorthand, to align the box's contents within itself.

Syntax

center | start | end | flow-start | flow-end | flex-start | flex-end

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Specification ↗ MDN reference ↗

`<overflow-position>`

Type Not in any browser yet

MDN The <overflow-position> enumerated value type defines how an alignment subject that is larger than its alignment container will overflow that container. For example, if centered items are wider than their container, the overflow may be displayed beyond the viewport's start edge, which can't be scrolled to. The <overflow-position> value defines whether the alignment mode should be overridden to ensure the content is visible (safe) or if the alignment mode must be adhered to (unsafe).

Syntax

unsafe | safe

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Specification ↗ MDN reference ↗

`<self-position>`

Type Not in any browser yet

MDN The <self-position> enumerated value data type is used by the justify-self and align-self properties, and the place-self shorthand, to align the box within its alignment container. It is also used by the justify-items and align-items properties, and the place-items shorthand, to specify default values for justify-self and align-self.

Syntax

center | start | end | self-start | self-end | flow-start | flow-end | flex-start | flex-end

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Specification ↗ MDN reference ↗

Each feature in detail

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Syntax

Syntax

Syntax

Syntax