【前端学习笔记 CSS系列二十】伸缩布局

最新推荐文章于 2023-02-01 09:54:18 发布

GUANYX~

最新推荐文章于 2023-02-01 09:54:18 发布

阅读量157

点赞数

分类专栏：前端学习笔记文章标签：前端 css css3

本文链接：https://blog.csdn.net/gyx1549624673/article/details/122944483

版权

前端学习笔记专栏收录该内容

56 篇文章 0 订阅

订阅专栏

一、效果

在这里插入图片描述

二、代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			section {
				width: 80%;
				height: 200px;
				border: 1px solid pink;
				margin: 100px auto;
				display: flex;
				min-width: 500px;
				/* 
					flex-direction：row；这是默认主轴方向即x
					flex-direction：column；可以修改主轴为y
				 */
				flex-direction: column;
			}
			
			section div:nth-child(1) {
				background-color: pink;
				/* flex: 1;  */
				/* flex子项目在主轴的缩放比例，不指定flex属性则不参与伸缩分配;比如下面列子中的固定宽度 */
				width: 200px;
			}
			section div:nth-child(2) {
				background-color: purple;
				flex: 1;
				
			}
			section div:nth-child(3) {
				background-color: pink;
				flex: 1;
			}
		</style>
	</head>
	<body>
		<section>
			<div>1</div>
			<div>2</div>
			<div>3</div>
		</section>
	</body>
</html>

关注博主即可阅读全文

优惠劵

GUANYX~

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【前端学习笔记 CSS系列二十】伸缩布局

一、效果二、代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> section { width: 80%; height: 200px; border: 1px solid pink; margin: 100px auto;
复制链接

扫一扫