弹性布局（flex）

最新推荐文章于 2024-05-10 17:07:06 发布

aA_a_a_a_a_Aa

最新推荐文章于 2024-05-10 17:07:06 发布

阅读量226

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/aA_a_a_a_a_Aa/article/details/124764021

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

本文用到的基础页面代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			/* 给大盒子设宽高，以及背景颜色，页面居中（方便观察） */
			.box{
				width: 1000px;
				height: 500px;
				margin: auto;
				background-color: burlywood;
			}
			/* 给小盒子设公共的背景颜色，边框（方便观察） */
			.box-text{
				background-color: aquamarine;
				border: 1px solid red;
			}
			/* 给小盒子设各自的宽高（方便观察） */
			.box-text:nth-child(1){
				width: 200px;
				height: 300px;
			}
			.box-text:nth-child(2){
				width: 300px;
				height: 400px;
			}
			.box-text:nth-child(3){
				width: 100px;
				height: 100px;
			}
			.box-text:nth-child(4){
				width: 200px;
				height: 150px;
				padding-top: 50px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box-text">
				我是第一个盒子的内容，宽200，高300
			</div>
			<div class="box-text">
				我是第二个盒子的内容，宽300，高400
			</div>
			<div class="box-text">
				我是第三个盒子的内容，宽100，高100
			</div>
			<div class="box-text">
				我是第四个盒子的内容，宽200，高150
			</div>
		</div>
	</body>
</html>

初始效果图

一、display：flex；

设置伸缩盒的 display 属性值：

.box{
    display: flex;  
}

二、flex容器属性

1.flex-direction设置伸缩项目的排列

属性值及说明：

属性值	说明
row	设置从左到右
row-reverse	设置从右到左
col

最低0.47元/天解锁文章

aA_a_a_a_a_Aa

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
弹性布局（flex）

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档前言本文用到的基础页面代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } /*.
复制链接

扫一扫