您的位置:首页> 前端教程> CSS3教程
文章导航

CSS align-self

2019-4-16 23:55| 作者: admin| 查看: 518| 评论: 0|来自: 蚂蚁部落

关于弹性布局的基本介绍可以参阅display:flex 弹性布局一章节。

上述文章虽有涉及,但非常简略,本文再通过代码实例详细介绍一下此属性的用法。

只要掌握了align-items属性,那么基本就掌握align-self属性的用法。

两个属性的主要异同点如下:

(1).两个属性都是用来规定项目在所在行中,容器交叉轴方向上的对齐方式。

(2).align-items属性在容器元素上设置,作用于所有项目,是面的设置。

(3).align-self属性在项目元素上设置,作用于当前项目,是点的设置。

align-self属性用于设置单个项目在行中容器交叉轴方向的对齐方式。

上文概念阐述中,多次提到"行"的概念,实质上此属性规定的是项目在行中的对齐方式。

关于行的概念本文不做介绍,具体可以参阅align-items与align-content区别一章节。

此属性所设置的属性值会覆盖通过align-items属性设置的值。

语法结构:

[CSS] 纯文本查看 复制代码
align-self: auto|stretch|center|flex-start|flex-end|baseline

属性值说明:

(1).auto:默认值,继承弹性容器的align-items属性值,如果弹性容器未设置align-items,默认值为stretch。

(2).stretch:规定项目被拉伸以使用容器在交叉轴上的尺寸。

(3).center:规定项目在行中交叉轴方向居中对齐。

(4).flex-start:规定项目在行中交叉轴方向起始位置对齐。

(5).flex-end:规定项目在行中交叉轴方向结束位置对齐。

(6).baseline:规定项目在所在行中基线对齐。

浏览器兼容:

(1).IE10+浏览器支持此属性。

(2).edge浏览器支持此属性。

(3).火狐浏览器支持此属性。

(4).谷歌浏览器支持此属性。

(5).Opera浏览器支持此属性。

(6).safria浏览器支持此属性。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style> 
#main {
  width: 300px;
  height: 200px;
  background:#ccc;
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
}
#main div {
  margin-left:10px;
  width: 70px;
  height:70px;
}
</style>
</head>
<body>
<div id="main">
  <div style="background-color:coral;align-self:center"></div>
  <div style="background-color:green;"></div>
  <div style="background-color:blue;"></div>
  <div style="background-color:red;"></div>
  <div style="background-color:yellow;"></div>
</div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/16/235706dqqiionmmnzzcsin.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).通过align-items属性设置项目拉伸,但是由于项目设置的固定宽度,所以项目本身没有拉伸效果。

(2).在第一个项目中设置align-self:center,于是第一个项目在其所在的行中居中对齐。

(3).align-items属性设置在容器元素,对所有项目有效,align-self直接设置在项目本身之上。

(4).说明align-items是对"面"的设置,而align-self则是"点"的设置。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style> 
#main {
  width: 300px;
  height: 200px;
  background:#ccc;
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
}
#main div {
  margin-left:10px;
  width: 70px;
  height:70px;
}
</style>
</head>
<body>
<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:green;align-self:flex-end;"></div>
  <div style="background-color:blue;"></div>
  <div style="background-color:red;"></div>
  <div style="background-color:yellow;"></div>
</div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/16/235722stqfno5pf0r0o5rp.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).通过align-items属性设置所有项目在所在行中交叉轴方向顶端对齐。

(2).然后再通过align-self属性设置第二个项目在所在汉中交叉轴方向低端对齐。

特别说明:

(1).再强调一下,设置的是项目在所在行中的对齐方式或者说空间分配方式。

(2).具体原理本文不再介绍,具体参阅align-items与align-content区别一章节。


鲜花

握手

雷人

路过

鸡蛋
上一篇:CSS align-content下一篇:CSS clip-path

最新评论

返回顶部