简体中文
简体中文
# justify-content
CSS justify-content 属性定义浏览器如何沿着弹性容器的主轴和网格容器的行向轴分配内容元素之间和周围的空间。
# uni-app x 兼容性
| Android | iOS | web |
|---|---|---|
| 3.9 | 4.11 | 4.0 |
# 语法
justify-content: normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ];
# justify-content 的属性值
center
元素紧密地排列在主轴方向居中对齐
flex-start
元素紧密地排列在容器主轴起始侧
flex-end
元素紧密地排列在容器主轴结束侧
space-between
在主轴上均匀分配元素。相邻元素间距离相同。第一个元素与主轴首对齐，最后一个元素与主轴尾对齐
space-around
元素沿着主轴均匀分布在容器中。相邻项之间的间距，主轴起始位置到第一个元素的间距，主轴结束位置到最后一个元素的间距，都完全一样
# 默认值
| 平台 | 默认值 |
|---|---|
| uvue | flex-start |
注意：W3C 默认值为：normal
# 适用组件
# 兼容性
# justify-content 的属性值兼容性
| Android | iOS | web | |
|---|---|---|---|
| center | 3.9 | 4.11 | 4.0 |
| flex-start | 3.9 | 4.11 | 4.0 |
| flex-end | 3.9 | 4.11 | 4.0 |
| space-between | 3.9 | 4.11 | 4.0 |
| space-around | 3.9 | 4.11 | 4.0 |
# 浏览器兼容性
| Chrome | Edge | Firefox | Opera | Safari | IE | |
|---|---|---|---|---|---|---|
| justify-content | √（ 29 ） | √（ 12 ） | √（ 20 ） | √（ 12.1 ） | √（ 9 ） | √（ 11 ） |
