小白教程
所有教程
关于
Search
172.70.126.176
172.70.126.176
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“Css3 pr align self”的源代码
本页内容
上一节:
Css3_pr_align_items
下一节:
Css3_pr_justify_content
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:align-self}}[[Category:css reference|110]] = CSS align-self 属性 = [[css reference|CSS 参考手册]] 居中对齐弹性对象元素内的某个项: <sample title="" desc="" lang="html" hererun="1"> #myBlueDiv { align-self:center; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> #main { width: 220px; height: 300px; border: 1px solid black; display: -webkit-flex; /* Safari */ -webkit-align-items: flex-start; /* Safari 7.0+ */ display: flex; align-items: flex-start; } #main div { -webkit-flex: 1; /* Safari 6.1+ */ flex: 1; } #myBlueDiv { -webkit-align-self: center; /* Safari 7.0+ */ align-self: center; } </style> </head> <body> <div id="main"> <div style="background-color:coral;">红色</div> <div style="background-color:lightblue;" id="myBlueDiv">蓝色</div> <div style="background-color:lightgreen;">带有更多内容的绿色 div</div> </div> <p><b>注意:</b> align-self 属性重写了容器的 align-items 属性。</p> <p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 align-items 属性。</p> <p><b>注意:</b> Safari 7.0 及更新版本通过 -webkit-align-items 属性支持该属性。</p> </body> </html> </run> == 浏览器支持 == 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。 {| class="table table-striped table-hover" ! 属性 ! Chrome ! Internet Explorer / Edge ! Firefox ! Safari ! Opera |- | align-self | 21.0 | 11.0 | 20.0 | 9.07.0 -webkit- | 12.1 |} == 定义和用法 == align-self 属性定义flex子项单独在侧轴(纵轴)方向上的对齐方式。 '''注意:'''align-self 属性可重写灵活容器的 align-items 属性。 {| class="table table-striped table-hover" |width="50%"| 默认值: |width="50%"| auto |- | 继承: | 否 |- | 可动画化: | 否。请参阅 [[css animatable|可动画化(animatable)]]。 |- | 版本: | CSS3 |- | JavaScript 语法: | object.style.alignSelf="center" <run name=""> <!DOCTYPE html> <html> <head> <style> #main { width:220px; height:300px; border:1px solid black; display:flex; align-items:flex-start; } #main div { flex: 1; } #myBlueDiv { align-self:center; } </style> </head> <body> <div id="main"> <div style="background-color:coral;">红色</div> <div style="background-color:lightblue;" id="myBlueDiv">蓝色</div> <div style="background-color:lightgreen;">带有更多内容的绿色 div</div> </div> <p>点击“尝试一下”按钮,设置 alignSelf 属性的值为 "stretch"。</p> <button onclick="myFunction()">尝试一下</button> <script> function myFunction() { document.getElementById("myBlueDiv").style.alignSelf = "stretch"; } </script> <p><b>注意:</b>Internet Explorer 和 Safari 不支持 alignSelf 属性。</p> </body> </html> </run> |} == CSS 语法 == <pre> align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;</pre> == 属性值 == {| class="table table-striped table-hover" !width="33%"| 值 !width="33%"| 描述 !width="33%"| 测试 |- | auto | 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。 | [[playit.php?f=playcss_align self&preval=auto|测试 »]] |- | stretch | 元素被拉伸以适应容器。 如果指定侧轴大小的属性值为'auto',则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照'min/max-width/height'属性的限制。 | [[playit.php?f=playcss_align self&preval=stretch|测试 »]] |- | center | 元素位于容器的中心。 弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。 | [[playit.php?f=playcss_align self&preval=center|测试 »]] |- | flex-start | 元素位于容器的开头。 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。 | [[playit.php?f=playcss_align self&preval=flex start|测试 »]] |- | flex-end | 元素位于容器的结尾。 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。 | [[playit.php?f=playcss_align self&preval=flex end|测试 »]] |- | baseline | 元素位于容器的基线上。 如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐。 | [[playit.php?f=playcss_align self&preval=baseline|测试 »]] |- | initial | 设置该属性为它的默认值。请参阅 [[css initial|initial]]。 | [[playit.php?f=playcss_align self&preval=initial|测试 »]] |- | inherit | 从父元素继承该属性。请参阅 [[css inherit|inherit]]。 | |} == 相关文章 == CSS 参考手册:[[css3 pr align content|align-content 属性]] CSS 参考手册:[[css3 pr align items|align-items 属性]] [[css reference|CSS 参考手册]]
返回至“
Css3 pr align self
”。
上一节:
Css3_pr_align_items
下一节:
Css3_pr_justify_content