阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      CSS3 align-self

      CSS align-self

      居中对齐弹性对象元素内的某个项:

      #myBlueDiv {
          align-self:center;
      }
      

      浏览器支持

      表格中的数字表示支持该属性的第一个浏览器的版本号。

      紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。

      属性IEChromeFFsafariOpen
      align-self21.011.020.09.0
      7.0 -webkit-
      12.1

      定义和用法

      align-self 属性定义flex子项单独在侧轴(纵轴)方向上的对齐方式。

      注意:align-self 属性可重写灵活容器的 align-items 属性。

      默认值:auto
      继承:
      可动画化:否。请参阅 可动画化(animatable)。
      版本:CSS3
      JavaScript 语法:object.style.alignSelf=“center”

      CSS 语法

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

      属性值

      描述测试
      auto默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch”。测试 »
      stretch元素被拉伸以适应容器。
      如果指定侧轴大小的属性值为’auto’,则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照’min/max-width/height’属性的限制。
      测试 »
      center元素位于容器的中心。
      弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。
      测试 »
      flex-start元素位于容器的开头。
      弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。
      测试 »
      flex-end元素位于容器的结尾。
      弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。
      测试 »
      baseline元素位于容器的基线上。
      如弹性盒子元素的行内轴与侧轴为同一条,则该值与’flex-start’等效。其它情况下,该值将参与基线对齐。
      测试 »
      initial设置该属性为它的默认值。请参阅 initial。测试 »
      inherit从父元素继承该属性。请参阅 inherit。

      相关文章

      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录