提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > css align-items属性怎样用?【css教程】,align-items属性,CSS

css align-items属性是用于指定float容器内项目在横轴方向的对齐体式格局:拉伸以添补容器、以横轴为中间、在顶部垂直对齐、在底部垂直对齐、横轴的基线处对齐。【视频教程引荐:CSS教程】

CSS align-items属性

align-items属性是Flexible Box 规划模块的子属性。

作用:定义了怎样沿当前行的横轴安排弹性项目的默许(对齐)行动。

注:能够在float容器内的每一个子项目中运用align-self属性来掩盖align-items属性的款式。

语法:

align-items: stretch|center|flex-start|flex-end|baseline;

stretch(默许):拉伸以添补容器(依然尊敬最小宽度/最大宽度)。

center:项目以横轴为中间;默许情况下,横轴是垂直的,这意味着flexbox项目将垂直居中 。

flex-start:项目在横轴的最先处对齐,即项目将在顶部垂直对齐。

flex-end:项目在横轴末尾对齐,即项目将在底部垂直对齐

baseline:项目在横轴的基线处对齐,即flexbox项目将本身对齐,以使其文本的基线沿水平线对齐。

CSS align-items属性的运用示例

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<style>
			.flex-container {
				padding: 0;
				margin: 0;
				list-style: none;
				-ms-box-orient: horizontal;
				display: -webkit-box;
				display: -moz-box;
				display: -ms-flexbox;
				display: -moz-flex;
				display: -webkit-flex;
				display: flex;
				float: left;
			}
			
			.flex-start {
				-webkit-align-items: flex-start;
				align-items: flex-start;
			}
			
			.flex-end {
				-webkit-align-items: flex-end;
				align-items: flex-end;
			}
			
			.flex-end li {
				background: gold;
			}
			
			.center {
				-webkit-align-items: center;
				align-items: center;
			}
			
			.center li {
				background: deepskyblue;
			}
			
			.baseline {
				-webkit-align-items: baseline;
				align-items: baseline;
			}
			
			.baseline li {
				background: lightgreen;
			}
			
			.stretch {
				-webkit-align-items: stretch;
				align-items: stretch;
			}
			
			.stretch li {
				background: hotpink;
			}
			
			.flex-item {
				background: tomato;
				padding: 5px;
				width: 50px;
				margin: 5px;
				line-height: 50px;
				color: white;
				font-weight: bold;
				font-size: 2em;
				text-align: center;
			}
		</style>

	</head>

	<body>
		<div class="box">
			<ul class="flex-container flex-start">
				<li class="flex-item">1<br>2</li>
				<li class="flex-item">3</li>
				<li class="flex-item">4<br>5</li>
				<li class="flex-item">6</li>
			</ul>

			<ul class="flex-container flex-end">
				<li class="flex-item">1<br>2</li>
				<li class="flex-item">3</li>
				<li class="flex-item">4<br>5</li>
				<li class="flex-item">6</li>
			</ul>

			<ul class="flex-container center">
				<li class="flex-item">1<br>2</li>
				<li class="flex-item">3</li>
				<li class="flex-item">4<br>5</li>
				<li class="flex-item">6</li>
			</ul>

			<ul class="flex-container baseline">
				<li class="flex-item">1<br>2</li>
				<li class="flex-item">3</li>
				<li class="flex-item">4<br>5</li>
				<li class="flex-item">6</li>
			</ul>

			<ul class="flex-container stretch">
				<li class="flex-item">1<br>2</li>
				<li class="flex-item">3</li>
				<li class="flex-item">4<br>5</li>
				<li class="flex-item">6</li>
			</ul>
		</div>
	</body>

</html>

效果图:

以上就是本篇文章的全部内容,愿望能对人人的进修有所协助。更多精彩内容人人能够关注ki4网相干教程栏目!!!

以上就是css align-items属性怎样用?的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

上一篇:

下一篇:

相关推荐

0 条评论关于"css align-items属性怎样用?【css教程】,align-items属性,CSS"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线