html flex布局使用笔记及问题

最新推荐文章于 2024-08-08 01:00:00 发布

李是谁？

最新推荐文章于 2024-08-08 01:00:00 发布

阅读量236

点赞数

分类专栏： Flex 文章标签： html

本文链接：https://blog.youkuaiyun.com/LiuxXn/article/details/109727869

版权

Flex 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了在CSS Flex布局中，如何让子元素根据其内容自适应高度。通过设置`align-items`属性为`flex-start`、`flex-end`、`center`、`baseline`或`stretch`，可以控制子元素在交叉轴上的对齐方式。当使用`align-items: stretch`时，子元素会填满整个容器的高度，但若要避免垂直居中，可以调整为`align-items: flex-start`，并结合`margin`和`padding`实现所需效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

设置flex布局后，子元素高度占满，不能根据子元素的子元素去自适应高度。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<title></title>
		<style>
			body{
			    min-height: 100vh;
				background-color: #9b59b6;
				background-image: url("https://source.unsplash.com/nDqA4d5NL0k/2000x2000");
				display: flex;
				justify-content: center;
			}			
			#bands {
				background-color: rgba(255,255,255,1);
				list-style: inside square;
				width: 31.25rem;
				background: wheat;
				margin: auto;
			}			
		</style>
	</head>
	<body>
		<ul id="bands">
			<li>sdfdsfsd</li>
			<li>sdfdsfsd</li>
		</ul>
	</body>
</html>

解决方式：给子元素加 margin: auto;
用了这种方式子元素会垂直方向居中

如果你不想居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<title></title>
		<style>
			body{
			    min-height: 100vh;
				background-color: #9b59b6;
		 		background-image: url("https://source.unsplash.com/nDqA4d5NL0k/2000x2000"); 
				display: flex;
				justify-content: center;
				align-items: flex-start;
			}			
			#bands {
				background-color: rgba(255,255,255,1);
				list-style: inside square;
				width: 31.25rem;
				background: white;
				box-shadow: 0 0 0.75rem 0.1875rem rgba(0,0,0,0.3);
				margin-top: 1.25rem;								
			}
			#bands li{
				border-bottom: 0.0625rem solid rgba(0,0,0,0.3);
				font-size: 1.3rem;
				padding: 0.625rem;
			}		
				
		</style>
	</head>
	<body>
		<ul id="bands">
			<li>sdfdsfsd</li>
			<li>sdfdsfsd</li>
		</ul>
		<script>
			const bands = ['The Plot in You', 'The Devil Wears Prada',
			 'Pierce the Veil', 'Norma Jean', 'The Bled', 'Say Anything',
			  'The Midway State', 'We Came as Romans', 'Counterparts',
			   'Oh, Sleeper', 'A Skylit Drive', 'Anywhere But Here', 'An Old Dog'];
			
		</script>
	</body>
</html>