Flex弹性盒模型

最新推荐文章于 2023-09-01 09:53:21 发布

张小水儿

最新推荐文章于 2023-09-01 09:53:21 发布

阅读量425

点赞数 1

分类专栏： CSS 文章标签： flex 布局 box

本文链接：https://blog.csdn.net/sinat_27350883/article/details/50127157

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

引言

flex为flexible box的缩写，即弹性布局，利用flex可以对网页进行灵活的布局

一个简单的例子

<html>
<head>
	<meta charset="utf-8">
	<title>flex弹性布局</title>
	<style type="text/css">
		.box{
			height:400px;
			width:500px;
			display:flex;
		}
		.firstbox{
			flex:1;
			background-color:#eee;
		}
		.secondbox{
			flex:2;
			background-color:#eef;
		}
		.thirdbox{
			flex:3;
			background-color:#fee;
		}
	</style>
</head>
	<body>
		<div class="box">
			<div class="firstbox"></div>
			<div class="secondbox"></div>
			<div class="thirdbox"></div>
		</div>
	</body>
</html>

简单来说就是按比例分配父元素的空间

注意：设为flex属性后，子元素的float，clear，vertical-align属性都将失效

flex的六个属性：

1.flex-direction

2.flex-wrap

3.flex-flow

4.justify-content

5.align-iterms

6.align-content

一.flex-direction

该属性确定了子元素的排列方向

该属性有四个取值：

row（默认值）：水平方向自左向右排列

row-reverse：水平方向自由向左排列

column：垂直方向自上而下

column-reverse：垂直方向自下而上

<html>
<head>
	<meta charset="utf-8">
	<title>flex弹性布局</title>
	<style type="text/css">
		.box{
			height:400px;
			width:500px;
			display:flex;
			flex-direction:row-reverse;
		}
		.firstbox{
			flex:1;
			background-color:#eee;
		}
		.secondbox{
			flex:2;
			background-color:#eef;
		}
		.thirdbox{
			flex:3;
			background-color:#fee;
		}
	</style>
</head>
	<body>
		<div class="box">
			<div class="firstbox">一号div框</div>
			<div class="secondbox">二号div框</div>
			<div class="thirdbox">三号div框</div>
		</div>
	</body>
</html>

<html>
<head>
	<meta charset="utf-8">
	<title>flex弹性布局</title>
	<style type="text/css">
		.box{
			height:400px;
			width:500px;
			display:flex;
			flex-direction:column;
		}
		.firstbox{
			flex:1;
			background-color:#eee;
		}
		.secondbox{
			flex:2;
			background-color:#eef;
		}
		.thirdbox{
			flex:3;
			background-color:#fee;
		}
	</style>
</head>
	<body>
		<div class="box">
			<div class="firstbox">一号div框</div>
			<div class="secondbox">二号div框</div>
			<div class="thirdbox">三号div框</div>
		</div>
	</body>
</html>

<html>
<head>
	<meta charset="utf-8">
	<title>flex弹性布局</title>
	<style type="text/css">
		.box{
			height:400px;
			width:500px;
			display:flex;
			flex-direction:row-reverse;
		}
		.firstbox{
			flex:1;
			background-color:#eee;
		}
		.secondbox{
			flex:2;
			background-color:#eef;
		}
		.thirdbox{
			flex:3;
			background-color:#fee;
		}
	</style>
</head>
	<body>
		<div class="box">
			<div class="firstbox">一号div框</div>
			<div class="secondbox">二号div框</div>
			<div class="thirdbox">三号div框</div>
		</div>
	</body>
</html>

二.flex-wrap

该属性定义了如果一条轴线上放不下如何换行

该属性有三个取值：

nowrap(默热)：不换行

wrap:换行，第一行在上方

wrap-reverse:换行，第一行在下方

<pre name="code" class="html"><html>
<head>
	<meta charset="utf-8">
	<title>flex弹性布局</title>
	<style type="text/css">
		.box{
			height:400px;
			width:500px;
			display:flex;
			flex-wrap:wrap;		
		}
		.firstbox{
			width:200px;
			height:200px;
			background-color:#eee;
		}
		.secondbox{
			width:200px;
			height:200px;
			background-color:#eef;
		}
		.thirdbox{
			width:200px;
			height:200px;
			background-color:#fee;
		}
	</style>
</head>
	<body>
		<div class="box">
			<div class="firstbox">一号div框</div>
			<div class="secondbox">二号div框</div>
			<div class="thirdbox">三号div框</div>
		</div>
	</body>
</html>

当属性值改变为wrap-reverse时，效果如下图所示

三.flex-flow

该属性为flex-direction属性和flex-wrap属性的简写方式

.box{
	flex-flow:row nowrap;
}

四.justify-content

该属性定义了子元素在轴向上的对齐方式

取值：flex-start flex-end center space-between space-around

<html>
<head>
	<meta charset="utf-8">
	<title>flex弹性布局</title>
	<style type="text/css">
		.box{
			height:400px;
			width:500px;
			display:flex;
			justify-content:flex-start;
		}
		.firstbox{
			width:100px;
			height:200px;
			background-color:#eee;
		}
		.secondbox{
			width:100px;
			height:200px;
			background-color:#eef;
		}
		.thirdbox{
			width:100px;
			height:200px;
			background-color:#fee;
		}
	</style>
</head>
	<body>
		<div class="box">
			<div class="firstbox">一号div框</div>
			<div class="secondbox">二号div框</div>
			<div class="thirdbox">三号div框</div>
		</div>
	</body>
</html>