怎么用cssalign-items属性-创新互联

这篇文章运用简单易懂的例子给大家介绍怎么用css align-items属性，代码非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

创新互联建站服务紧随时代发展步伐，进行技术革新和技术进步，经过十余年的发展和积累，已经汇集了一批资深网站策划师、设计师、专业的网站实施团队以及高素质售后服务人员，并且完全形成了一套成熟的业务流程，能够完全依照客户要求对网站进行网站建设、网站制作、建设、维护、更新和改版，实现客户网站对外宣传展示的首要目的，并为客户企业品牌互联网化提供全面的解决方案。

css align-items属性是用于指定float容器内项目在横轴方向的对齐方式：拉伸以填充容器、以横轴为中心、在顶部垂直对齐、在底部垂直对齐、横轴的基线处对齐。

CSS align-items属性

align-items属性是Flexible Box 布局模块的子属性。

作用：定义了如何沿当前行的横轴布置弹性项目的默认（对齐）行为。

注：可以在float容器内的每个子项目中使用align-self属性来覆盖align-items属性的样式。

语法：

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

stretch（默认）：拉伸以填充容器（仍然尊重最小宽度/大宽度）。

怎么用css align-items属性

center：项目以横轴为中心；默认情况下，横轴是垂直的，这意味着flexbox项目将垂直居中。

怎么用css align-items属性

flex-start：项目在横轴的开始处对齐，即项目将在顶部垂直对齐。

怎么用css align-items属性

flex-end：项目在横轴末端对齐，即项目将在底部垂直对齐

怎么用css align-items属性

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

怎么用css align-items属性

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>

效果图：

怎么用css align-items属性

关于怎么用css align-items属性就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

新闻标题：怎么用cssalign-items属性-创新互联
本文路径：https://www.cdcxhl.com/article32/djpppc.html

成都网站建设公司_创新互联，为您提供外贸网站建设、域名注册、全网营销推广、品牌网站建设、企业网站制作、商城网站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容