flexbox布局之父容器属性设置

责编:menVScode 2017-06-27 22:26 阅读(650)

        父容器下的属性介绍

        1、display : flex

        2、flex-direction:决定主轴的方向

            row(默认值):主轴为水平方向,起点在左端;

QQ截图20170627221401

            row-reverse:主轴为水平方向,起点在右端;

QQ截图20170627221520

            column:主轴为垂直方向,起点在上沿;

QQ截图20170627221728

            column-reverse:主轴为垂直方向,起点在上沿;

QQ截图20170627221811

 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<title>Document</title>
 	<style>
		.main{
			border: 1px solid red;
			display: flex;
			flex-direction:row-reverse;
			/*flex-direction:column;
			flex-direction:column-reverse;*/
		}
		.main div{width: 100px;height: 100px;background: orange;margin: 5px;}
	</style>
 </head>
 <body>
 	<div class="main">
 		<div class="one">one</div>
 		<div class="two">two</div>
 		<div class="three">three</div>
 		<div class="four">four</div>
 	</div>
 </body>
 </html>

        3、flex-wrap:决定主轴排列方式

            nowrap(默认)不换行

            wrap:换行

            wrap-reverse换行交叉轴方向相反

QQ截图20170627224421

 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<title>Document</title>
 	<style>
		.main{
			width: 300px;
			border: 1px solid red;
			display: flex;
			flex-direction:row;/*这个属性,子元素高就是设置好的高*/
			flex-wrap:wrap-reverse;/*这个属性,子元素宽就是设置好的宽,如果默认不写就是nowrap,宽浏览器自己算*/
		}
		.main div{width:100px;height: 100px;background: orange;margin: 5px;}
	</style>
 </head>
 <body>
 	<div class="main">
 	    .....
 	</div>
 </body>
 </html>

        4、flex-flow:组合语法糖,结合了flex-direction和flex-wrap属性

.main{
	width: 300px;
	border: 1px solid red;
	display: flex;
	/*
	flex-direction:row; 这个属性,子元素高就是设置好的高
	flex-wrap:wrap-reverse; 这个属性,子元素宽就是设置好的宽,如果默认不写就是nowrap,宽浏览器自己算
	*/
	flex-flow:row-reverse wrap-reverse;
}

        5、justify-content:主轴上的对齐方式

            flex-start(默认值):左对齐

QQ截图20170627231218

            flex-end:右对齐

QQ截图20170627231308

            center:居中

QQ截图20170627231400

            space-between:两端对齐,项目之间的间隔都相等

QQ截图20170627231515

            space-around:项目之间有间隔

QQ截图20170627231553

        6、align-items:交叉轴上的对齐方式

            flex-start:交叉轴的起点对齐(默认)

QQ截图20170627232705

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

QQ截图20170627232742

            center:交叉轴的中点对齐

QQ截图20170627232823

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

QQ截图20170627233016

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

QQ截图20170627233251

        7、align-content:定义多根轴线的对齐方式

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

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

            center:与交叉轴的中点对齐

            space-between:与交叉轴两端对齐,轴线之间的间隔平分

            space-around:每根轴线两两侧的间隔相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。

            stretch(默认值):轴线占满整个交叉轴。

《flexbox布局之项目属性设置》:http://www.menvscode.com/detail/59528c1341d2a6025bbe0443

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

邮箱快速注册

忘记密码