flex 弹性盒的基本小属性

最新推荐文章于 2023-05-25 13:42:46 发布

小白卷不动

最新推荐文章于 2023-05-25 13:42:46 发布

阅读量323

点赞数 2

分类专栏：前端小结笔记类文章标签： css

本文链接：https://blog.csdn.net/m0_62331212/article/details/123938078

版权

flex 代替浮动来布局页面

特点：flex可以使元素具有弹性，让元素根据页面的大小改变而改变

弹性容器

要使用弹性盒，必须把元素设置成一个弹性容器

通过display 设置弹性容器

display ：flex 块级弹性容器
**display ：inline-flex 行内弹性容器 **

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				/* height: 600px; */
				width: auto;
				border: red 5px solid;
				display: flex;
				/* display: inline-flex; */
			}
			.box1{
				height: 200px;
				width: 200px;
				background-color: aqua;
			}
			.box2{
				height: 200px;
				width: 200px;
				background-color: pink;
			}
			.box3{
				height: 150px;
				width: 200px;
				background-color: yellowgreen;
			}
		</style>
	</head>
	<body>
		<div class=&

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小白卷不动

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
flex 弹性盒的基本小属性

flex 代替浮动来布局页面特点：flex可以使元素具有弹性，让元素根据页面的大小改变而改变弹性容器要使用弹性盒，必须把元素设置成一个弹性容器通过display 设置弹性容器display ：flex 块级弹性容器**display ：inline-flex 行内弹性容器 **<!DOCTYPE html><html> <head> <meta charset="utf-8"> <titl
复制链接

扫一扫