flex伸缩布局

最新推荐文章于 2024-05-04 17:16:30 发布

依赖_赖

最新推荐文章于 2024-05-04 17:16:30 发布

阅读量533

点赞数

分类专栏： JavaScript+css+html 文章标签： css3 伸缩布局

本文链接：https://blog.csdn.net/weixin_39150852/article/details/83035924

版权

JavaScript+css+html 专栏收录该内容

82 篇文章 2 订阅

订阅专栏

1.flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配

min-width 最小值 max-width: 最大值
min-width: 280px 最小宽度不能小于 280
max-width: 1280px 最大宽度不能大于 1280

2.flex-direction调整主轴方向（默认为水平方向）

flex-direction: column 垂直排列
flex-direction: row 水平排列

实现手机端伸缩式表格布局
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>大海波涛</title>
		<link rel="shortcut icon" href="favicon.ico" />
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
				box-sizing: border-box;
			}
			body{
				min-width: 320px;
				max-width: 540px;
				margin: 0 auto;
			}
			nav{
				border: 1px solid #ccc;
				padding: 3px;
			}
			.row{
				height: 100px;	
				display: flex;
				border-radius: 5px;
				overflow: hidden;
			}
			.row div{
				height: 100%;
				flex: 1;
				border-right: 1px solid #fff;
				background-color: pink;
			}
			.row div:last-child{
				border-right: 0;
			}
			.row a{
				display: block;
				width: 100%;
				height:100%;
			}
			.row23{
				display: flex;
				flex-direction: column;/*垂直分布*/
			}
			.row23 a{
				flex: 1;
				
			}
			.row23 a:first-child{
				border-bottom: 1px solid #fff;
			}
		</style>
	</head>
	<body>	
		<nav>
			<div class="row">
				<div>
					<a href="#"></a>
				</div>
				<div class="row23">
					<a href="#"></a>
					<a href="#"></a>
				</div>
				<div class="row23">
					<a href="#"></a>
					<a href="#"></a>
				</div>
			</div>
		</nav>
	</body>
</html>

依赖_赖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flex伸缩布局

1.flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配min-width 最小值 max-width: 最大值min-width: 280px 最小宽度不能小于 280max-width: 1280px 最大宽度不能大于 12802.flex-direction调整主轴方向（默认为水平方向）flex-direction: column 垂直排列...
复制链接

扫一扫

专栏目录