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

CSS align-content

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

关于弹性布局的总体概括性介绍可以参阅display:flex 弹性布局一章节。

此属性用于设置交叉轴方向项目的对齐方式,本文将通过代码实例对其进行详细介绍。

一.知识准备:

(1).弹性容器中的轴线:

将元素的display属性值设置为flex或者inline-flex即可形成一个flex容器,也称之为容器元素。

关于flex与inline-flex的区别可以参阅display:flex与inline-flex 区别一章节。

容器元素具有两个轴线,默认状态下,水平的主轴和与主轴垂直的交叉轴。

主轴与交叉轴的方位是可以改变的,具体参阅CSS flex-direction一章节。

简单图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/16/131644vwadkkfkefvfhivf.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

(2).多行容器与单行容器:

弹性容器分为单行容器与多行容器,flex-wrap属性值为wrap或者wrap-reverse的容器是多行容器(即便容器中项目只有一行),否则容器就是单行容器。多行容器中,每一行交叉轴方向上的尺寸就是其中项目的最大尺寸,单行容器中,行交叉轴方向的尺寸就是容器交叉轴方向上的尺寸。

二.属性基本用法:

此属性用于设置容器中的项目在交叉轴上的对齐方式,与align-items功能非常类似。

更为准确的说,此属性是设置容器中交叉轴方向上行的对齐方式,后面会通过代码实例进一步说明。

特别说明:如果是单行容器,则此属性不起作用,具体原因会在代码实例中阐明。

关于align-content与align-items的区别可以参阅align-items与align-content区别一章节。

语法结构:

[CSS] 纯文本查看 复制代码
align-content: stretch|center|flex-start|flex-end|space-between|space-around

属性值解析:

(1).stretch:默认值,规定行被拉伸以适应交叉轴容器的尺寸,其中的项目随之被拉伸。

(2).center:规定容器中的行在容器交叉轴上居中对齐。

(3).flex-start:规定容器中的行在容器交叉轴上起始位置对齐。

(4).flex-end:规定容器中的行在容器交叉轴上结束位置对齐。

(5).space-between:规定容器中的行在容器交叉轴上两端对齐,行之间的间隔都相等。

(6).space-around:每规定容器中的行两侧的间隔相等。所以行之间的间隔比行与容器边缘的间隔大一倍。

三.代码实例:

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

代码运行效果截图如下:

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

上述代码分析如下:

(1).通过flex-flow: row wrap将外层div设置为多行容器。

(2).设置align-content属性值为stretch。

(3).那么行就会在交叉轴方向扩展以适应容器交叉轴方向的尺寸,项目尺寸也随之扩展。

(4).如果设置了项目交叉轴方向的尺寸,比如height,那么项目尺寸不会扩展,只是行的尺寸的扩展。

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

代码运行效果截图如下:

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

代码分析如下:

(1).单行容器,且设置align-content属性值为center。

(2).可以看到容器中的项目并没有在容器交叉轴上居中显示。

(3).因为,实质上是设置的行在容器交叉轴上的对齐方式,并且单行容器中的行高默认是容器交叉轴的高度。

(4).所以,在视觉上也就达不到项目在容器中居中的效果了。

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

代码运行效果截图如下:

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

代码分析如下:

(1).多行容器,且设置align-content属性值为flex-start。

(2).也就是设置行在在交叉轴方位上起始位置对齐,本例中就是顶端对齐。

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

代码运行效果截图如下:

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

代码分析如下:

(1).多行容器,且设置align-content属性值为space-between。

(2).也就是设置行在容器交叉轴上两端对齐,行之间的间隔都相等。

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

代码运行效果截图如下:

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

代码分析如下:

(1).多行容器,且设置align-content属性值为space-around。

(2).设置行两侧的间隔相等,所以,行之间的间隔比行与容器边缘的间隔大一倍。

(3).也就是说每一个项目交叉轴方向两侧都有一定的间隔,于是如果两个项目相邻,它们之间的间隔就是两个对应间隔的值,所以黄色与绿色之间的间隔是黄色与容器顶部边缘之间间隔的两倍。


鲜花

握手

雷人

路过

鸡蛋
上一篇:CSS calc()下一篇:CSS align-self

最新评论

返回顶部