当前位置:Gxlcms > html代码 > css3flex流动自适应响应式布局实例_html/css_WEB-ITnose

css3flex流动自适应响应式布局实例_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:71人阅读

上次简要的说了一些css3中flex的相关概念(详细: css学习16:css3 flex流动自适应响应式布局设计 ),这次继续说下css3的flex,简单的举几个实例。

一、图片自适应居中

实例图:

实例HTML:

实例CSS:

.demo{	width: 100px;	height: 100px;	border: 2px solid #ddd;	background: #f5f5f5;	padding: 6px;	float: left;	margin-left: 20px;	/*flex布局(作用于容器)*/	display: flex;	/*水平居中(作用于容器)*/	justify-content: center;	/*垂直居中(作用于容器)*/	align-items: center;}.demo img{	max-width: 100px;	max-height: 100px;	width: auto;	height: auto;}

demo: http://demo.qianduanblog.com/2799/1.html

二、水平响应式列表

实例图:

实例HTML:

高120px
高50px
高140px
高100px

实例CSS:

.demo-wrap{	border: 2px solid #ddd;	background: #f5f5f5;	padding: 6px;}.demo{	width: 100%;	/*flex布局(作用于容器)*/	display: flex;	/*两端对齐(作用于容器)*/	justify-content: space-between;}.demo .item{	width: 100px;	background: #ffd;	color: #C90000;	font-size: 20px;	text-align: center;	line-height: 50px;}.demo .item1{	height: 120px;}.demo .item2{	height: 50px;}.demo .item3{	height: 140px;}.demo .item4{	height: 100px;}

demo: http://demo.qianduanblog.com/2799/2.html

三、水平响应式列表底端对齐

和上个例子差不多,只是增加了底端对齐的的特性。

只是修改了容器的样式:

.demo{	width: 100%;	/*flex布局(作用于容器)*/	display: flex;	/*两端对齐(作用于容器)*/	justify-content: space-around;	/*侧轴方向对齐方式(作用于容器)*/	align-items: flex-end;}

demo: http://demo.qianduanblog.com/2799/3.html

四、多行响应式布局

宽屏:

中屏:

窄屏:

HTML代码:

CSS代码:

.demo-wrap{	border: 2px solid #ddd;	background: #f5f5f5;	padding: 6px;}.demo{	width: 100%;	/*flex布局(作用于容器)*/	display: flex;	/*两端对齐(作用于容器)*/	justify-content: space-around;	/*侧轴方向对齐方式(作用于容器)*/	align-items: flex-end;	/*换行(作用于容器)*/	flex-wrap: wrap;}.demo .item{	width: 300px;	height: 50px;	background: #444;	margin-bottom: 20px;}

demo: http://demo.qianduanblog.com/2799/4.html

五、左固定右自适应等高布局

演示截图:

HTML:

左边固定宽度为100px,这里设置了高度为auto
右边宽度自适应,并且左右两个区域是等高的,这里设置了高度为200px

CSS:

.demo{	/*flex布局(作用于容器)*/	display: flex;	/*项目拉伸对齐,也就是所左边的高度为拉伸到和右边等高,默认是拉伸的*/	/*align-items: stretch;*/}.demo .left{	/*左边固定宽度,必须设置其最小宽度和最大宽度*/	width: 100px;	min-width: 100px;	max-width: 100px;	/*高度自由分配*/	height: auto;	background: #B4D3F7;	/*空白区域分配比例为0(作用于项目)*/	flex-grow: 0;}.demo .right{	margin-left: 10px;	width: auto;	height: 200px;	background: #F7E8B4;	/*空白区域分配比例为1(作用于项目)	左右得到的空白比例为0:1,所以右边会分配到剩余的所有空白区域,	左边成固定的宽度,右边为自适应宽度*/	flex-grow: 1;}

demo: http://demo.qianduanblog.com/2799/5.html

六、左右固定中间自适应宽度底部对齐布局

上面的例子是左右布局的,相比较而言,双栏布局会做了,那么三栏布局也就不是问题了。先看实例图:

HTML:

左边固定宽度为100px,这里设置了高度为auto
中间宽度自适应,并且左中右两个区域是等高的,这里设置了高度为200px
右边固定宽度为150px,这里设置了高度为auto

CSS:

.demo{	/*flex布局(作用于容器)*/	display: flex;	/*项目拉伸对齐,也就是所左边的高度为拉伸到和右边底部对齐*/	align-items: flex-end;}.demo .left{	/*左边固定宽度,必须设置其最小宽度和最大宽度*/	width: 100px;	min-width: 100px;	max-width: 100px;	/*高度自由分配*/	height: auto;	background: #B4D3F7;	/*空白区域分配比例为0(作用于项目)*/	flex-grow: 0;}.demo .center{	margin: 0 10px;	width: auto;	height: 200px;	background: #F7E8B4;	/*空白区域分配比例为1(作用于项目)	左右得到的空白比例为0:1,所以右边会分配到剩余的所有空白区域,	左边成固定的宽度,右边为自适应宽度*/	flex-grow: 1;}.demo .right{	/*右边固定宽度,必须设置其最小宽度和最大宽度*/	width: 150px;	min-width: 150px;	max-width: 150px;	/*高度自由分配*/	height: auto;	background: #CBFFD2;	/*空白区域分配比例为0(作用于项目)*/	flex-grow: 0;}

demo: http://demo.qianduanblog.com/2799/6.html

人气教程排行