当前位置:首页 > 前端开发 > css > 正文内容

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

Miao6个月前 (03-22)css334

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 {
    align-self: stretch;
}

扫描二维码推送至手机访问。

版权声明:本文由Miao发布,版权归作者所有,如需转载请注明出处。

本文地址:https://www.wmlike.com/?id=42

标签: css3
分享给朋友:

相关文章

css实现各种Loading效果附解析【强烈建议收藏】

css实现各种Loading效果附解析【强烈建议收藏】

以下的这些案例原理都是通过不同的延迟时间,给元素或子元素设置包括X、Y和Z轴上的移动旋转,以及缩放来达到动画的效果。有了这些参考,加上创意还能做出更多的类型加载效果。 <div class=&...

css3实现文字渐变色

css3实现文字渐变色

给文字渐变很简单,只需要用到css3的background-image和background-clip属性,我们先来看看效果: <!DOCTYPE html> <html>...

深入理解css3动画:animation、transform、transition

深入理解css3动画:animation、transform、transition

前言在CSS3之前,动画主要都是以JavaScript或者Gif图片来实现,但是实现效果并不是很理想或者制作起来很麻烦,自有了CSS3之后很多动画几句代码即可实现,方便,快速,性能更好。 目录 a...

css3多列布局、分栏

css3多列布局、分栏

以前,如报纸类型排版,要用CSS动态实现其实是比较困难的,因为内容是动态的,每个div显示多少文字是很难控制的。现在CSS3提供了个新属性columns用于多列布局,下面我们就来详细看看。...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。