网站建设   网站建设技术   网页设计   html/css  

css3 align-self 属性使用方法及示例

人浏览  发布时间:2021-10-07

align-self属性为flex容器中的元素指定默认对齐方式。 align-self属性值 值 描述 auto 默认值,元素继承了它的父容器的 align-items 属性。如果没有父容器则为 stretch。 baseline 元素位于flex容器的基线。 center 元素位于伸缩容器的中心。 flex-start 元素位于flex容器的开头。 flex-end 该元素位于伸缩容器的末端。 stretch 拉伸该元素以适合flex容器。 initial 将此属性设置为其默认值。 inherit 如果指定,则关联元素采用其父元素属性的计算值align-self。 align-self 使用语法 align-self: auto | baseline | center | flex-start | flex-end | stretch | initial | inherit; JavaScript 语法 object . style . alignItems = center ; 浏览器兼容性(支持该属性的第一个浏览器的版本号) Firefox 20+ Google Chrome21+ Internet Explorer 11+ Apple Safari 7+ Opera 12.1+ 实例 !DOCTYPE html html head meta charset = utf-8 title align-self 属性 /title style . container { width : 300px ; height : 300px ; border : 2px solid #777; display : flex ; } . container div { width : 100px ; min - height : 100px ; background : #e84d51; } . align - self { align - self : flex - start ; } /style /head body div class = container div class = align-self /div /div /body /html . align - self { align - self : center ; } . align - self { a...

align-self属性为flex容器中的元素指定默认对齐方式。

 

align-self属性值

描述
auto 默认值,元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch”。
baseline 元素位于flex容器的基线。
center 元素位于伸缩容器的中心。
flex-start 元素位于flex容器的开头。
flex-end 该元素位于伸缩容器的末端。
stretch 拉伸该元素以适合flex容器。
initial 将此属性设置为其默认值。
inherit 如果指定,则关联元素采用其父元素属性的计算值align-self。

align-self 使用语法


  1. align-self: auto | baseline | center | flex-start | flex-end | stretch | initial | inherit;

JavaScript 语法


  1. object.style.alignItems="center";

浏览器兼容性(支持该属性的第一个浏览器的版本号)

  • Firefox 20+
  • Google Chrome21+
  • Internet Explorer 11+
  • Apple Safari 7+
  • Opera 12.1+

实例


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>align-self 属性</title>
  6. <style>
  7. .container {
  8. width: 300px;
  9. height: 300px;
  10. border: 2px solid #777;
  11. display: flex;
  12. }
  13. .container div {
  14. width: 100px;
  15. min-height: 100px;
  16. background: #e84d51;
  17. }
  18. .align-self {
  19. align-self: flex-start;
  20. }
  21. </style>
  22. </head>
  23. <body>
  24. <div class="container">
  25. <div class="align-self"></div>
  26. </div>
  27. </body>
  28. </html>


  1. .align-self {
  2. align-self: center;
  3. }


  1. .align-self {
  2. align-self: stretch;
  3. }

 
 

点击浏览下载讲义资料
(编辑:360°搜索建站)

备注:本网站资料免费下载浏览,为百度空间下载资料,需用户注册有百度账号,登陆后才可浏览下载,如有疑问联系我们免费解答。


你可能喜欢的:

友情链接
24小时服务电话:13992352808 地址:广东省深圳市宝安区西乡街道东方商务大厦 WebDesign ©2012 Corporation 360°搜索建站网 网站地图