一篇文章，让你精通css布局（Flex布局）

2024-04-05 07:55:47

相信大家在学习网页的时候都会感觉听着简单，但是做的时候总时做不好，盒子布局的宽和高，总时让你头大，下面我们就进入弹性盒子布局（Flex布局），编程网页更加容易吧1

什么是Flex布局（弹性盒子布局）？

Flex为Flexible Box的缩写，意思是“弹性盒子”，用来为盒子模型提供最大的灵活性。小编通俗易懂的话就是设置好宽（或者高），让其他标签的宽高把盒子的高（或者宽）撑起来。我们把felx容器简称为“容器”，子元素自动称为容器成员称为“flex项目”，简称为“项目”。

容器默认存在二个轴：水平方向为主轴，垂直方向为交叉轴

如何改为弹性盒子？

块元素成为弹性盒子

.box{
    //块元素改为fllex
	display: flex;
}

行内元素改为弹性盒子布局（用的不多）

.box{
	display: inline-flex;
}

在Webkit内核浏览器是，必须要加上前缀

.box{
	display: -webkit-flex;
	display: flex;
}

注意事项：Flex布局后，子元素的float,clear和vertical-align不能生效：

特点：没有其他属性情况下

1，所一子元素都以一列方式排列倒父元素中。

2，如果子元素的总宽度超过父元素，子元素就等比例缩小。

3，如果子元素的总宽度不超过父元素，子元素就就正常排列。

容器样式属性

flex-direction：决定主轴的排列方向

flex-direction 参数
row	主轴为水平方向，从左开始排列
row-reverse	主轴为水平方向，从右开始排列
column	主轴为垂直方向，从上开始排列
column-reverse	主轴为垂直方向，从下开始排列

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>弹性盒子布局</title>
		<link rel="stylesheet" href="../css/general.css">
		<link rel="stylesheet" href="../css/flex.css">
		
	</head>
	<body>
		<div class="box">
			<div>这是个div1</div>
			<div>这是个div2</div>
			<div>这是个div3</div>
			<div>这是个div4</div>
			<div>这是个div5</div>
			<div>这是个div6</div>
		</div>
	</body>
</html>



//css部分
.box{
	width: 500px;
	height: 200px;
	border: 1px solid red;
	/* 让box成为弹性盒子布局 */
	display: flex;
	margin: auto;
	font-size: 20px;
	/* 决定主轴的排列方向
	 row 主轴为水平方向，从左开始排列
	 row-reverse 主轴为水平方向，从右开始排列
	 column 主轴为垂直方向，从上开始排列
	 column-reverse 主轴为垂直方向，从下开始排列
	 */
	flex-direction:row-reverse;
}

.box>div{
	width: 50px;
	height: 200px;
	color: pink;
	border: 1px solid black;
}

flex-wrap 换不换行

flex-wrap 的参数
wrap	换行
nowrap（默认）	不换行
wrap-reverse	换行，在第一行下方

flex-flow属性

flex-flow属性是flex-wrap与flex-direction属性的简写。默认row nowrap.

justify-content: 项目在主轴上的对齐方式

justify-content 的参数
flex-start	左对齐
flex-end	右对齐
space-between	二端对齐，项目之间隔相等
space-around	每个项目二测之间隔相等，项目直接间隔比项目边框间隔大

.box{
	width: 500px;
	height: 200px;
	border: 1px solid red;
	/* 让box成为弹性盒子布局 */
	display: flex;
	margin: auto;
	font-size: 20px;
		
	/* justify-content  项目在主轴上的对齐方式
	 flex-start  左对齐
	 flex-end ：右对齐
	 space-between 二端对齐，项目之间隔相等
	 space-around  每个项目二测之间隔相等，项目直接间隔比项目边框间隔大
	 */
	
	justify-content: space-around;
	
}

.box>div{
	width: 50px;
	height: 200px;
	color: pink;
	border: 1px solid black;
}

align-items 项目在交叉轴上的对齐方式

align-items 的参数
stretch	（默认）如果项目没有设置高度或者为auto，将占满整个容器，
flex-start	交叉轴起点对齐
flex-end	交叉轴终点对齐
baseline	目的第一行文字的基线对齐
center	交叉轴中心点对齐

.box{
	width: 500px;
	height: 200px;
	border: 1px solid red;
	/* 让box成为弹性盒子布局 */
	display: flex;
	margin: auto;
	font-size: 20px;
		
	/* align-items 项目在交叉轴上的对齐方式
	stretch 如果项目没有设置高度或者为auto，将占满整个容器，
	 flex-start  交叉轴起点对齐
	 flex-end ：交叉轴终点对齐
	  baseline 项目的第一行文字的基线对齐
	 center 交叉轴中心点对齐
	 */
	
	align-items: baseline;
	
}

.box>div{
	width: 50px;
	height: 200px;
	color: pink;
	border: 1px solid black;
}

align-content 定义多根轴线的对齐方式，如果项目只有一根轴线，改属性不起作用

align-content 的参数
center	与交叉轴的中心对齐
flex-start	与交叉轴起点对齐
flex-end	与交叉轴终点对齐
stretch	轴线占满整个交叉线
space-between	与交叉轴二端对齐，项目之间隔相等
space-around	每个轴线二测之间隔相等，项目直接间隔比项目边框间隔大

.box{
	width: 600px;
	height: 1000px;
	border: 1px solid red;
	/* 让box成为弹性盒子布局 */
	display: flex;
	margin: auto;
	font-size: 20px;
	justify-content: space-around;
	flex-wrap: wrap-reverse;
		
	/* align-content 定义多根轴线的对齐方式，如果项目只有一根轴线，改属性不起作用。
		
	 */
	
	align-content: space-around;
	
}

.box>div{
	width: 150px;
	height: 200px;
	color: pink;
	border: 1px solid black;
}

项目样式属性

order 定义排列顺序

.box{
	width: 600px;
	height: 1000px;
	border: 1px solid red;
	/* 让box成为弹性盒子布局 */
	display: flex;
	margin: auto;
	font-size: 20px;
}

.box>div{
	width: 150px;
	height: 200px;
	color: pink;
	border: 1px solid black;
}
.box > div:nth-child(4){
	/*
	order 定义排列顺序，数值小，排前面，默认为0；
	
	 */
	order: -2;
}

flex-grow 规定项目放大比例

.box{
	width: 600px;
	height: 1000px;
	border: 1px solid red;
	/* 让box成为弹性盒子布局 */
	display: flex;
	margin: auto;
	font-size: 20px;
	flex-wrap: wrap;
}

.box>div{
	width: 150px;
	height: 200px;
	color: pink;
	border: 1px solid black;
	flex-grow
}
.box > div:nth-child(4){
	/*
	order 定义排列顺序，数值小，排前面，默认为0；
	
	 */
	flex-grow:2;
}

flex-shrink 规定项目缩小比例

默认为1，如果空间不足时缩小，当空间小，flex-shrink设置为0时，项目就不会缩小，空间足够时，不变，负值无效。

flex-basis 定义分配多余空间之前，计算主轴是否有多余空间

默认是auto，项目本来大小。

flex flex-grow与flex-shrink简写

默认是0 1 auto ，后二个属性可以选择。

align-self 允许单个项目与其他项目不一样的对齐方式

可覆盖 align-items属性，默认为auto，表示继承父类的align-items属性，如果没有父类，则等同于stretch.

.box{
	width: 600px;
	height: 1000px;
	border: 1px solid red;
	/* 让box成为弹性盒子布局 */
	display: flex;
	margin: auto;
	font-size: 20px;
	flex-wrap: wrap;
}

.box>div{
	width: 150px;
	height: 200px;
	color: pink;
	border: 1px solid black;
	
}
.box > div:nth-child(8){
	/*
	order 定义排列顺序，数值小，排前面，默认为0；
	
	 */
	flex-shrink:4;
	align-self:flex-end ;
}

码农公寓