“Css3 pr justify content”的版本间差异
本页内容
(创建页面,内容为“{{DISPLAYTITLE:justify-content}}3 = CSS justify-content 属性 = CSS 参考手册 在弹性盒对象的 <div> 元素中的各项周围留有空白: <sample title="" desc="" lang="html" hererun="1"> div { display: flex; justify-content: space-around; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> #main { width: 400…”) |
无编辑摘要 |
||
第57行: | 第57行: | ||
{| class="table table-striped table-hover" | {| class="table table-striped table-hover" | ||
! 属性 | ! 属性 | ||
! | ! Chrome | ||
! | ! Internet Explorer / Edge | ||
! | ! Firefox | ||
! | ! Safari | ||
! | ! Opera | ||
|- | |- | ||
| justify-content | | justify-content |
2022年8月19日 (五) 04:40的版本
CSS justify-content 属性
在弹性盒对象的 <div> 元素中的各项周围留有空白:
示例
div
{
display: flex;
justify-content: space-around;
}
浏览器支持
表格中的数字表示支持该属性的第一个浏览器的版本号。
紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。
属性 | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
justify-content | 29.021.0 -webkit- | 11.0 | 28.018.0 -moz- | 9.06.1 -webkit- | 17.0 |
定义和用法
justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。
提示:使用 align-content 属性对齐交叉轴上的各项(垂直)。
默认值: | flex-start |
继承: | 否 |
可动画化: | 否。请参阅 可动画化(animatable)。 |
版本: | CSS3 |
JavaScript 语法: |
object.style.justifyContent="space-between"
|
示例
/* 对齐方式 */
justify-content: center; /* 居中排列 */
justify-content: start; /* 从行首开始排列 */
justify-content: end; /* 从行尾开始排列 */
justify-content: flex-start; /* 从行首起始位置开始排列 */
justify-content: flex-end; /* 从行尾位置开始排列 */
justify-content: left; /* 一个挨一个在对齐容器得左边缘 */
justify-content: right; /* 元素以容器右边缘为基准,一个挨着一个对齐, */
/* 基线对齐 */
justify-content: baseline;
justify-content: first baseline;
justify-content: last baseline;
/* 分配弹性元素方式 */
justify-content: space-between; /* 均匀排列每个元素
首个元素放置于起点,末尾元素放置于终点 */
justify-content: space-around; /* 均匀排列每个元素
每个元素周围分配相同的空间 */
justify-content: space-evenly; /* 均匀排列每个元素
每个元素之间的间隔相等 */
justify-content: stretch; /* 均匀排列每个元素
'auto'-sized 的元素会被拉伸以适应容器的大小 */
/* 溢出对齐方式 */
justify-content: safe center;
justify-content: unsafe center;
/* 全局值 */
justify-content: inherit;
justify-content: initial;
justify-content: unset;
CSS 语法
justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;
属性值
值 | 描述 | 测试 |
---|---|---|
flex-start | 默认值。从行首起始位置开始排列。 | 测试 » |
flex-end | 从行尾位置开始排列。 | 测试 » |
center | 居中排列。 | 测试 » |
space-between | 均匀排列每个元素,首个元素放置于起点,末尾元素放置于终点。 | 测试 » |
space-evenly | 均匀排列每个元素,每个元素之间的间隔相等。 | 测试 » |
space-around | 均匀排列每个元素,每个元素周围分配相同的空间。 | 测试 » |
initial | 设置该属性为它的默认值。请参阅 initial。 | 测试 » |
inherit | 从父元素继承该属性。请参阅 inherit。 |
相关文章
CSS 参考手册:align-content 属性
CSS 参考手册:align-items 属性
CSS 参考手册:align-self 属性