css align-content属性笔记

原创 PHP笔记  2017-09-14 18:06  阅读 1,553 views 次

css align-content属性定义及用法

1、在css中,align-content属性是用来在弹性容器内的各项没有占用交叉轴上所有可用的空间时垂直对齐容器内的各项.

2、容器中要有多行的项目,align-content属性才能表现出效果。

3、align-content相似属性:justify-content属性是用来水平对齐主轴上的各项。

align-content属性值

  • stretch:被拉伸以适应容器(默认值)。
  • center:位于容器的中心。
  • flex-start:位于容器的开头。
  • flex-end:位于容器的结尾。
  • space-between :位于各行之间留有空白的容器内。
  • space-around:位于各行之前、之间、之后都留有空白的容器内。
  • initial:设置该属性为它的默认值。
  • inherit:从父元素继承该属性。

格式:

align-content: stretch / center / flex-start / flex-end / space-between / space-around / initial|inherit;

实例:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css align-content属性笔记</title>
<style>
#fx {
width: 100px;
height: 500px;
border: 1px solid #000;
display: flex;/*flex容器*/
flex-wrap: wrap;/*flex容器为多行*/
align-content: center;/*位于容器的中心*/
}
#fx div {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="fx">
<div style="background-color:red;"></div>
<div style="background-color:blue;"></div>
<div style="background-color:pink;"></div>
</div>
</body>
</html>

运行结果:

非常相关
本文地址:https://www.ggbiji.com/css-align-content.html
版权声明:本文为 PHP笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情