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

CSS align-items

2019-4-12 11:17| 作者: admin| 查看: 668| 评论: 0|来自: 蚂蚁部落

关于弹性布局的更多内容可以参阅display:flex 弹性布局一章节。

CSS弹性布局涉及的属性非常多,本文通过代码实例详细介绍一下align-items用法。

align-items属性用于规定弹性布局容器中的项目在交叉轴上的排列方式。

特别说明:此属性应用于弹性布局的容器元素之上,非弹性布局环境中无效。

关于项目在主轴上的排列方式可以参阅CSS justify-content一章节。

语法结构:

[CSS] 纯文本查看 复制代码
align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;

属性值解析:

(1).stretch:默认值,弹性布局容器中的项目会在交叉轴方向拉伸以适应容器。

(2).center:规定弹性布局容器中的项目在交叉轴方向上居中对齐。

(3).flex-start:规定弹性布局容器中的项目交叉轴起始位置对齐。

(4).flex-end:规定弹性布局容器中的项目交叉轴结束位置对齐。

(5).baseline:规定弹性布局容器中的项目第一行文字的基线对齐。

(6).initial:规定弹性布局容器中的项目默认方式显示,参阅CSS initial 属性一章节。

(7).inherit:从父元素继承该属性。

对于上面概念涉及到的几个概念进行一下简单介绍:

(1).只要为元素添加display: flex属性即可形成一个弹性布局环境,当前元素就是容器元素。

(2).容器具有两条轴线,一条是主轴,一条是交叉轴,默认状态下,主轴是水平的,交叉轴是垂直的。

(3).通过CSS flex-direction属性可以改变主轴的方位,比如由水平修改为垂直。

a:3:{s:3:\"pic\";s:43:\"portal/201904/12/111957sa6b97bj8r8r07is.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

图示简单如下:

(1).main axis表示主轴,cross axis表示交叉轴。

(2).默认主轴左侧为起点,右侧为终点,交叉轴上部为起点,底部为终点。

浏览器兼容:

(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: 400px;
  height: 150px;
  background:#ccc;
  display: flex;
  align-items:stretch;
}
#main div {
  text-align:center;
  flex:1;
}
</style>
</head>
<body>
<div id="main">
  <div style="background-color:coral;">A</div>
  <div style="background-color:lightblue;">B</div>
  <div style="background-color:khaki;">C</div>
</div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/12/112039g2vhl0kexo615l8e.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码说明如下:

(1).在外层div上应用display: flex属性,那么它就成为一个弹性布局容器元素。

(2).align-items属性值应用于容器之上,用来设置容器中项目在交叉轴上的排列方式。

(3).align-items属性值为stretch(默认值),规定在交叉轴方位上拉伸项目以适应容器尺寸。

特别说明:如果项目的高度设置了固定尺寸,那么不会被拉伸,感兴趣的朋友可以自行测试一下。

关于flex属性的用法本文不做介绍,具体可以参阅CSS flex 属性一章节。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style> 
#main {
  width: 400px;
  height: 100px;
  background:#ccc;
  display: flex;
  align-items:center;
}
#main div {
  text-align:center;
  flex:1;
} 
</style>
</head>
<body>
<div id="main">
  <div style="background-color:coral;">A</div>
  <div style="background-color:lightblue;">B</div>
  <div style="background-color:khaki;">C</div>
</div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/12/112122whiz4zueflhhvuc7.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码说明如下:

(1).在外层div上应用display: flex属性,那么它就成为一个弹性布局容器元素。

(2).align-items属性值应用于容器之上,用来设置容器中项目在交叉轴上的排列方式。

(3).align-items属性值为center,规定在交叉轴方位上项目居中对齐。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style> 
#main {
  width: 400px;
  height: 100px;
  background:#ccc;
  display: flex;
  align-items:flex-start;
}
#main div {
  text-align:center;
  flex:1;
} 
</style>
</head>
<body>
<div id="main">
  <div style="background-color:coral;">A</div>
  <div style="background-color:lightblue;">B</div>
  <div style="background-color:khaki;">C</div>
</div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/12/112148pjwwwg1j3gws1o3b.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码说明如下:

(1).在外层div上应用display: flex属性,那么它就成为一个弹性布局容器元素。

(2).align-items属性值应用于容器之上,用来设置容器中项目在交叉轴上的排列方式。

(3).align-items属性值为flex-start,规定项目以交叉轴起始位置对齐。

(4).默认状态下,交叉顶端为起始位置,所以项目顶端对齐。

其他属性值,后面就不再一一演示,如有任何问题或者建议可以在文章底部留言。


鲜花

握手

雷人

路过

鸡蛋
上一篇:CSS justify-content下一篇:CSS flex-shrink

最新评论

返回顶部