这篇翻译不完整。请帮忙从英语翻译这篇文章

 

CSS align-items属性将所有直接子节点上的align-self值设置为一个组。 align-self属性设置项目在其包含块中的对齐方式。

 

目前,Flexbox和CSS网格布局支持此属性。在Flexbox中,它控制十字轴上项目的对齐方式,在网格布局中,它控制块轴上项目的对齐方式。

语法

/* Basic keywords */
align-items: normal;
align-items: stretch;

/* Positional alignment */
align-items: center; /* Pack items around the center */
align-items: start; /* Pack items from the start */
align-items: end; /* Pack items from the end */
align-items: flex-start; /* Pack flex items from the start */
align-items: flex-end; /* Pack flex items from the end */
align-items: self-start;
align-items: self-end;

/* Baseline alignment */ 
align-items: baseline;
align-items: first baseline;
align-items: last baseline; /* Overflow alignment (for positional alignment only) */
align-items: safe center;
align-items: unsafe center;

/* Global values */
align-items: inherit;
align-items: initial;
align-items: unset;

取值

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.
flex-start
元素向侧轴起点对齐。
flex-end
元素向侧轴终点对齐。
start
The item is packed flush to each other toward the start edge of the alignment container in the appropriate axis.
end
The item is packed flush to each other toward the end edge of the alignment container in the appropriate axis.
center
元素在侧轴居中。如果元素在侧轴上的高度高于其容器,那么在两个方向上溢出距离相同。
left
The items are packed flush to each other toward the left edge of the alignment container. If the property’s axis is not parallel with the inline axis, this value behaves like start.
right
The items are packed flush to each other toward the right edge of the alignment container in the appropriate axis. If the property’s axis is not parallel with the inline axis, this value behaves like start.
self-start
The items is packed flush to the edge of the alignment container of the start side of the item, in the appropriate axis.
self-end
The item is packed flush to the edge of the alignment container of the end side of the item, in the appropriate axis.
baseline
first baseline
last baseline
所有元素向基线对齐。侧轴起点到元素基线距离最大的元素将会于侧轴起点对齐以确定基线。
stretch
弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。
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.

语法格式

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

示例

CSS

#container {
  height:200px;
  width: 240px;
  align-items: center; /* Can be changed in the live sample */
  background-color: #8c8c8c;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 50px);
}

div > div {
  box-sizing: border-box;
  border: 2px solid #8c8c8c;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#item1 {
  background-color: #8cffa0;
  min-height: 30px;
}

#item2 {
  background-color: #a0c8ff;
  min-height: 50px;
}

#item3 {
  background-color: #ffa08c;
  min-height: 40px;
}

#item4 {
  background-color: #ffff8c;
  min-height: 60px;
}

#item5 {
  background-color: #ff8cff;
  min-height: 70px;
}

#item6 {
  background-color: #8cffff;
  min-height: 50px;
  font-size: 30px;
}

select {
  font-size: 16px;
}

.row {
  margin-top: 10px;
}

HTML

<div id="container" class="flex">
  <div id="item1">1</div>
  <div id="item2">2</div>
  <div id="item3">3</div>
  <div id="item4">4</div>
  <div id="item5">5</div>
  <div id="item6">6</div>
</div>

<div class="row">
  <label for="display">display: </label>
  <select id="display">
    <option value="flex">flex</option>
    <option value="grid">grid</option>
  </select>
</div>

<div class="row">
  <label for="values">align-items: </label>
  <select id="values">
    <option value="normal">normal</option>
    <option value="flex-start">flex-start</option>
    <option value="flex-end">flex-end</option>
    <option value="center" selected>center</option>
    <option value="baseline">baseline</option>
    <option value="stretch">stretch</option>

    <option value="start">start</option>
    <option value="end">end</option>
    <option value="self-start">self-start</option>
    <option value="self-end">self-end</option>
    <option value="left">left</option>
    <option value="right">right</option>

    <option value="first baseline">first baseline</option>
    <option value="last baseline">last baseline</option>

    <option value="safe center">safe center</option>
    <option value="unsafe center">unsafe center</option>
    <option value="safe right">safe right</option>
    <option value="unsafe right">unsafe right</option>
    <option value="safe end">safe end</option>
    <option value="unsafe end">unsafe end</option>
    <option value="safe self-end">safe self-end</option>
    <option value="unsafe self-end">unsafe self-end</option>
    <option value="safe flex-end">safe flex-end</option>
    <option value="unsafe flex-end">unsafe flex-end</option>
  </select>
</div>

Result

规范

规范 状态 说明
CSS Box Alignment Module Level 3
align-items
Working Draft Update to latest syntax definitions.
CSS Flexible Box Layout Module
align-items
Candidate Recommendation Initial definition

初始值normal
适用元素all elements
是否是继承属性
适用媒体visual
计算值as specified
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar

浏览器兼容性

Support in Flex layout

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 52
Full support 52
Partial support 29
Notes
Notes 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.
Full support 21
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Edge Full support 12
Full support 12
Full support 12
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Firefox Full support 20
Notes
Full support 20
Notes
Notes Multi-line flexbox has been supported since Firefox 28.
Full support 49
Prefixed
Prefixed Requires the vendor prefix: -webkit-
No support 18 — ?
Disabled
Disabled From version 18: this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Full support 48
Prefixed Disabled
Prefixed Requires the vendor prefix: -webkit-
Disabled From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Full support 11
Notes
Full support 11
Notes
Notes In Internet Explorer 10 and 11, if column flex items have align-items: center; set on them and their content is too large, then they will overflow the bounds of their container. See Flexbug #2.
Opera Full support 12.1Safari Full support 7
Prefixed
Full support 7
Prefixed
Prefixed Requires the vendor prefix: -webkit-
WebView Android Full support 52
Full support 52
Partial support 4.4
Notes
Notes 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.
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Chrome Android Full support 52
Full support 52
Partial support 29
Notes
Notes 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.
Full support 25
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Edge Mobile Full support Yes
Full support Yes
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Firefox Android Full support 20
Notes
Full support 20
Notes
Notes Multi-line flexbox has been supported since Firefox 28.
Full support 49
Prefixed
Prefixed Requires the vendor prefix: -webkit-
No support 18 — ?
Disabled
Disabled From version 18: this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Full support 48
Prefixed Disabled
Prefixed Requires the vendor prefix: -webkit-
Disabled From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 12.1Safari iOS Full support 7
Prefixed
Full support 7
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Samsung Internet Android ?
first baseline and last baselineChrome ? Edge ? Firefox Full support 45IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Full support 45Opera Android ? Safari iOS ? Samsung Internet Android ?
start and endChrome ? Edge ? Firefox Full support 45IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Full support 45Opera Android ? Safari iOS ? Samsung Internet Android ?
left and rightChrome ? Edge ? Firefox Full support 45IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Full support 45Opera Android ? Safari iOS ? Samsung Internet Android ?
safe and unsafeChrome No support NoEdge No support NoFirefox Full support 63IE No support NoOpera No support NoSafari ? WebView Android ? Chrome Android ? Edge Mobile No support NoFirefox Android Full support 63Opera Android ? Safari iOS ? Samsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

Support in Grid layout

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 57Edge Full support 16Firefox Full support 52IE ? Opera Full support 44Safari Full support 10.1WebView Android Full support 57Chrome Android Full support 52Edge Mobile Full support YesFirefox Android Full support 52Opera Android Full support 44Safari iOS Full support 10.3Samsung Internet Android Full support 6.2

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

参考

文档标签和贡献者

最后编辑者: zhuangyin,