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

2021-10-24 19:59:37 阅读：183 来源： 互联网

标签：box Flex flex 布局 height width 1px 对齐 css

相信大家在学习网页的时候都会感觉听着简单，但是做的时候总时做不好，盒子布局的宽和高，总时让你头大，下面我们就进入弹性盒子布局（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 ;
}

标签：box,Flex,flex,布局,height,width,1px,对齐,css
来源： https://blog.csdn.net/weixin_47514459/article/details/120937285

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9