flex 伸缩盒子，使用范例（子元素在侧轴对齐方式align-items；单个元素，在侧轴对齐方式align-self）

最新推荐文章于 2024-09-02 13:16:51 发布

xqiitan

最新推荐文章于 2024-09-02 13:16:51 发布

阅读量1.4k

点赞数

分类专栏： h5 CSS

本文链接：https://blog.csdn.net/xqiitan/article/details/88530768

版权

h5 同时被 2 个专栏收录

48 篇文章 0 订阅

订阅专栏

CSS

27 篇文章 0 订阅

订阅专栏

根据服务器返回条目，N个菜单平分标题栏宽度。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>flex：伸缩菜单</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			div {
				width: 500px;
				height: 400px;
				border: 1px solid #CCCCCC;
				margin: 100px auto;
			}
			div>ul{
				width: 100%;
				list-style: none; /* 去掉列表样式 */
				display: flex; /* 设置父容器为伸缩盒子 */
			}
			div>ul>li {
				flex: 1;
				background-color: #7DFFE7;
				border-right: 1px solid #CCCCCC;
				line-height: 36px;
				/* 元素居中显示 */
				height: 36px;
				text-align: center;
			}
			
		</style>
	</head>
	<body>
		<div >
			<ul>
				<li>首页体育</li>
				<li>热门新闻</li>
				<li>娱乐新闻</li>
				<li>钓鱼频道</li>
			</ul>
		</div>
	</body>
</html>

===================================================

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>flex：伸缩菜单</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			div {
				width: 900px;
				height: 400px;
				border: 1px solid green;
				margin: 0px auto;
				display: flex;
				/* 设置主轴方向的排列方向 */
				/* justify-content: space-around; */
				/* align-items-设置子元素，在侧轴方向上的对齐方式
				 center：设置在侧轴上，居中对齐
				 flex-start：设置在侧轴上，顶对齐
				 flex-end：设置在侧轴上，底部对齐
				 stretch：拉伸，让子元素在侧轴方向上拉伸，填充满整个侧轴方向，【默认值】
				 baseline：文本基线
				 */
				align-items: center;
			}
			.first{
				width: 200px;
				height: 200px;
				background-color: red;
				align-self: flex-start;
			}
			.second{
				width: 200px;
				height: 200px;
				background-color: beige;
				size: 39px;
				/* 设置单个元素，在侧轴方向的对齐方式 */
				align-self: flex-end;
			}
			.third{
				width: 200px;
				height: 200px;
				background-color: deeppink;
			}
		</style>
	</head>
	
	<body>
		<div class="box">
			<div class="first">1cabcgpfryc</div>
			<div class="second" style="font-size: 100px;">ggb2</div>
			<div class="third">bpbpbpbp3</div>
		</div>
	</body>
</html>