一篇文章,让你精通css布局(Flex布局)

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

一篇文章,让你精通css布局(Flex布局)

flex-wrap 换不换行

        

flex-wrap 的参数
wrap 换行
nowrap(默认) 不换行
wrap-reverse 换行,在第一行下方

一篇文章,让你精通css布局(Flex布局)

 

 

 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;
}

一篇文章,让你精通css布局(Flex布局)

  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;
}

一篇文章,让你精通css布局(Flex布局)

 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;
}

一篇文章,让你精通css布局(Flex布局)

 

项目样式属性

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;
}

一篇文章,让你精通css布局(Flex布局)
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;
}

一篇文章,让你精通css布局(Flex布局)
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 ;
}

一篇文章,让你精通css布局(Flex布局)

 

上一篇:flex速记


下一篇:小程序使用弹性布局