align-self

在此页

句法
形式定义
形式句法
范例
规范
浏览器兼容性
另请参阅
相关话题

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 .

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

The property doesn't apply to block-level boxes, or to table cells. If a flexbox item's cross-axis margin is auto , then align-self 被忽略。

句法

/* 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: unset;

值

auto

Computes to the parent's


align-items

值。

normal

The effect of this keyword is dependent of the layout mode we are in:

In absolutely-positioned layouts, the keyword behaves like start on replaced absolutely-positioned boxes, and as stretch on all other absolutely-positioned boxes.
In static position of absolutely-positioned layouts, the keyword behaves as stretch .
For flex items, the keyword behaves as stretch .
For grid items, this keyword leads to a behavior similar to the one of stretch , except for boxes with an aspect ratio or an intrinsic sizes where it behaves like start .
The property doesn't apply to block-level boxes, and to table cells.

self-start

Aligns the items to be flush with the edge of the alignment container corresponding to the item's start side in the cross axis.

self-end

Aligns the items to be flush with the edge of the alignment container corresponding to the item's end side in the cross axis.

flex-start

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

flex-end

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

center

The flex item's margin box is centered within the line on the cross-axis. If the cross-size of the item is larger than the flex container, it will overflow equally in both directions.

baseline first baseline last baseline

Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.
The fallback alignment for


first baseline


start

, the one for


last baseline

end

stretch

If the combined size of the items along the cross axis is less than the size of the alignment container and the item is


auto

-sized, its size is increased equally (not proportionally), while still respecting the constraints imposed by


max-height


max-width

(or equivalent functionality), so that the combined size of all


auto

-sized items exactly fills the alignment container along the cross axis.

safe

If the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were


start

unsafe

Regardless of the relative sizes of the item and alignment container, the given alignment value is honored.

形式定义

初始值	`auto`
适用于	flex items, grid items, and absolutely-positioned boxes
继承	no
计算值	`auto` computes to itself on absolutely-positioned elements, and to the computed value of `align-items` on the parent (minus any legacy keywords) on all other boxes, or `start` if the box has no parent. Its behavior depends on the layout model, as described for `justify-self` . Otherwise the specified value.
动画类型	discrete

形式句法

auto | normal | stretch | <baseline-position> | <overflow-position>? <self-position>where 
<baseline-position> = [ first | last ]? baseline
<overflow-position> = unsafe | safe
<self-position> = center | start | end | self-start | self-end | flex-start | flex-end

范例

HTML

<section>
  <div>Item #1</div>
  <div>Item #2</div>
  <div>Item #3</div>
</section>

CSS

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;
}

结果

规范

规范	状态	注释
CSS Box Alignment Module Level 3 The definition of 'align-self' in that specification.	工作草案	Update to latest syntax definitions.
CSS Flexible Box Layout Module The definition of 'align-self' in that specification.	候选推荐	初始定义。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Support in Flex layout

更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
Supported in Flex Layout	Chrome 完整支持 36 完整支持 36 部分支持 29 注意事项注意事项 Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52. 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Edge 完整支持 12	Firefox 完整支持 20 注意事项完整支持 20 注意事项注意事项 Before Firefox 27, only single-line flexbox is supported. 不支持 18 — 20 Disabled Disabled From version 18 until version 20 (exclusive): this feature is behind the `layout.css.flexbox.enabled` preference (needs to be set to `true` ). To change preferences in Firefox, visit about:config. preference (needs to be set to ). To change preferences in Firefox, visit about:config.	IE 完整支持 11	Opera 完整支持 12.1	Safari 完整支持 9	WebView Android 完整支持 37 完整支持 37 部分支持 4.4 注意事项注意事项 Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52. 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Chrome Android 完整支持 36 完整支持 36 部分支持 29 注意事项注意事项 Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52. 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Firefox Android 完整支持 20 注意事项完整支持 20 注意事项注意事项 Before Firefox 27, only single-line flexbox is supported. 不支持 18 — 20 Disabled Disabled From version 18 until version 20 (exclusive): this feature is behind the `layout.css.flexbox.enabled` preference (needs to be set to `true` ). To change preferences in Firefox, visit about:config. preference (needs to be set to ). To change preferences in Firefox, visit about:config.	Opera Android 完整支持 12.1	Safari iOS 完整支持 9	Samsung Internet Android 完整支持 3.0 完整支持 3.0 部分支持 2.0 注意事项注意事项 Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Samsung Internet 6.0. 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit-
`baseline`	Chrome 完整支持 57	Edge 完整支持 79	Firefox 完整支持 45	IE 不支持 No	Opera 完整支持 44	Safari 不支持 No	WebView Android 完整支持 57	Chrome Android 完整支持 57	Firefox Android 完整支持 45	Opera Android 完整支持 43	Safari iOS 不支持 No	Samsung Internet Android 完整支持 7.0
`first baseline` and `last baseline`	Chrome 完整支持 57	Edge 完整支持 79	Firefox 完整支持 52	IE 不支持 No	Opera 完整支持 44	Safari 不支持 No	WebView Android 完整支持 57	Chrome Android 完整支持 57	Firefox Android 完整支持 52	Opera Android 完整支持 43	Safari iOS 不支持 No	Samsung Internet Android 完整支持 7.0
`left` and `right`	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 52	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 52	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No
`safe` and `unsafe`	Chrome 不支持 No 注意事项不支持 No 注意事项注意事项 This value is recognized, but has no effect.	Edge 不支持 No 注意事项不支持 No 注意事项注意事项 This value is recognized, but has no effect.	Firefox 完整支持 63	IE 不支持 No	Opera 不支持 No 注意事项不支持 No 注意事项注意事项 This value is recognized, but has no effect.	Safari 不支持 No 注意事项不支持 No 注意事项注意事项 This value is recognized, but has no effect.	WebView Android 不支持 No 注意事项不支持 No 注意事项注意事项 This value is recognized, but has no effect.	Chrome Android 不支持 No 注意事项不支持 No 注意事项注意事项 This value is recognized, but has no effect.	Firefox Android 完整支持 63	Opera Android 不支持 No 注意事项不支持 No 注意事项注意事项 This value is recognized, but has no effect.	Safari iOS 不支持 No 注意事项不支持 No 注意事项注意事项 This value is recognized, but has no effect.	Samsung Internet Android 不支持 No 注意事项不支持 No 注意事项注意事项 This value is recognized, but has no effect.
`start` and `end`	Chrome 完整支持 57	Edge 完整支持 79	Firefox 完整支持 45	IE 不支持 No	Opera 完整支持 44	Safari 不支持 No	WebView Android 完整支持 57	Chrome Android 完整支持 57	Firefox Android 完整支持 45	Opera Android 完整支持 43	Safari iOS 不支持 No	Samsung Internet Android 完整支持 7.0
`stretch`	Chrome 完整支持 57	Edge 完整支持 79	Firefox 完整支持 52	IE 不支持 No	Opera 完整支持 44	Safari 不支持 No	WebView Android 完整支持 57	Chrome Android 完整支持 57	Firefox Android 完整支持 52	Opera Android 完整支持 43	Safari iOS 不支持 No	Samsung Internet Android 完整支持 7.0

图例

完整支持
不支持
见实现注意事项。
用户必须明确启用此特征。
要求使用供应商前缀或不同名称。

Support in Grid layout