flexbox布局之项目属性设置

责编:menVScode 2017-06-28 0:47 阅读(693)

            项目下的属性介绍

            1、order:order属性定义项目的排列顺序;数值越小,排列越靠前,默认为0。

            QQ截图20170628000932

 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<title>Document</title>
 	<style>
		.main{
			background: #EDEDED;
			display: flex;
		}
		.main div{
			border:1px solid red;
			height: 150px;
			margin: 5px;
			display: flex;
			justify-content:center;
			align-items:center;
			order:10;
		}
		.main div.three{order: 1;background: orange;}
 	</style>
 </head>
 <body>
 	<div class="main">
 		<div class="">1</div>
 		<div class="">2</div>
 		<div class="three">3</div>
 		<div class="">4</div>
 		<div class="">5</div>
 		<div class="">6</div>
 	</div>
 </body>
 </html>

        2、flex-grow:放大比例

       数字,无单位,当子元素的 flex-basis 长度「小」于它自己在父元素分配到的长度,按照数字做相对应的「伸展」比例分配,预设值为 1,设为 0 的话不会进行弹性变化,不可为负值。

        3、flex-shrink:缩小尺寸

        数字,无单位,当子元素的 flex-basis 长度「大」于它自己在父元素分配到的长度,按照数字做相对应的「压缩」比例分配,预设值为 1,设为 0 的话不会进行弹性变化,不可为负值。

        4、flex-basis:默认尺寸

        子元素的基本大小,作为父元素的大小比较基准,预设值为 0,也因为预设值为 0,所以没有设定此属性的时候,会以直接採用 flex-grow 属性,flex-basis 也可以设为 auto,如果设为 auto,就表示子元素以自己的基本大小为单位。。

        5、flex:flex-grow flex-shrink flex-basis

<style>
	.main{background: #EDEDED;display: flex;}
	.main div{border:1px solid red;height: 150px;margin: 5px;
		display: flex;
		justify-content:center;
		align-items:center;
		order:10;
		flex-grow:1;
		flex-shrink:1;
	}
	.main div.three{order: 1;background: orange;
		flex-grow:2;
		flex-shrink:2;/*缩小是当复日期宽度不够的情况下,缩小指定的div*/
		flex-basis: 500px;/*剩余的宽度他们区分*/
		/*flex:2 2 500px*/
	}
</style>

        6、align-self单个项目有与其他项目不一样的对齐方式

            flex-start:与交叉轴的起点对齐

            flex-end:与交叉轴的终点对齐

            center:与交叉轴的中点对齐

            baseline:项目第一行文字的基线对齐

            stretch(默认值):如果项目未设置高度或设为auto,将沾满整个容器的高度。

        与父容器属性中的align-items相似,详见《flexbox布局之父容器属性设置》:http://www.menvscode.com/detail/59526b3241d2a6025bbe0442

.main div.three{order: 1;background: orange;height: 30px;
	flex-grow:2;
	flex-shrink:2;/*缩小是当复日期宽度不够的情况下,缩小指定的div*/
	flex-basis: 500px;/*剩余的宽度他们区分*/
	align-self:flex-end;
}

QQ截图20170628003824

标签: flexbox flex css3
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码