Flex布局

一.什么是flex布局？

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。

话不多说直接码上代码：

1.flex-direction:row | row-reverse | column | column -reverse (决定主轴方向即排列方向)

html:

<div class="main">
	<div class="no1">1</div>
	<div class="no2">2</div>
	<div class="no3">3</div>
	<div class="no4">4</div>
	<div class="no5">5</div>
	<div class="no6">6</div>
	<div class="no7">7</div>
	<div class="no8">8</div>
	<div class="no9">9</div>
</div>

css:

.main {
	width: 100%;
	display: flex;
	flex-direction: row; /*横向排列*/
	flex-wrap: wrap; /*一排排不下自动换行*/
	text-align: center;
	line-height: 10rem;
	border: 0.126666rem solid black;
	font-size: 2rem;
}		
.main div {
	width: 10rem;
	height: 10rem;
}			
.no1 {
        background-color: blue;
}			
.no2 {
        background-color: red;
}			
.no3 {
        background-color: brown;
}			
.no4 {	
        background-color: lawngreen;
}			
.no5 {
	background-color: goldenrod;
}			
.no6 {
	background-color: aqua;
}			
.no7 {
	background-color: rosybrown;
}			
.no8 {
	background-color: cadetblue;
}			
.no9 {
	background-color: sandybrown;
}			

效果图：

flex-direction: row；

flex-direction: row-reverse;

flex-direction: column;                                 

 

 flex-direction: column-reverse;

2.justify-content:flex-end | flex-start | center | space-between | space-around (justify-content属性定义了项目在主轴上的对齐方式。)

html:

<div class="No2main">
	<div class="no40">5</div>
	<div class="no50">6</div>
	<div class="no60">7</div>
</div>

css:

.No2main {
		height: 10rem;
		display: flex;
		justify-content: flex-end;
		border: 0.126666rem solid black;
		align-items: center;
		font-size: 2rem;
		}
	 .no40 {
		width: 8rem;
		height: 8rem;
		text-align: center;
		line-height: 8rem;
		background-color: brown;
		}
	 .no50 {
		width: 8rem;
		height: 8rem;
		text-align: center;
		line-height: 8rem;
		background-color: yellow;
		}
	 .no60 {
		width: 8rem;
		height: 8rem;
		text-align: center;
		line-height: 8rem;
		background-color: olive;
		}

效果图：

justify-content: flex-start;

justify-content: space-around;

justify-content: center;

3.align-items: flex-end | flex-start | center （属性定义项目在交叉轴上如何对齐）

html:

		<div class="center">
			<div class="Onemain">
				<div class="one">1</div>
				<div class="two">2</div>
				<div class="three">3</div>
				<div class="four">4</div>
			</div>
			<div class="Twomain">
				<div class="one">1</div>
				<div class="two">2</div>
				<div class="three">3</div>
				<div class="four">4</div>
			</div>
			<div class="Threemain">
				<div class="one">1</div>
				<div class="two">2</div>
				<div class="three">3</div>
				<div class="four">4</div>
			</div>
		</div>

css:

.center {
				display: flex;
				border: 0.126666rem solid black;
				justify-content: space-between;
				text-align: center;
			}
			
			.Onemain {
				display: flex;
				align-items:flex-start ;
				border: 0.013333rem solid black;
			}
			
			.Twomain {
				display: flex;
				align-items:center ;
				border: 0.013333rem solid black;
			}
			
			.Threemain {
				display: flex;
				align-items: flex-end;
				border: 0.013333rem solid black;
			}
			
			.one {
				width: 5rem;
				height: 6rem;
				background-color: red;
			}
			
			.two {
				width: 5rem;
				height: 2rem;
				background-color: black;
			}
			
			.three {
				width: 5rem;
				height: 4rem;
				background-color: green;
			}
			
			.four {
				width: 5rem;
				height: 9rem;
				background-color: tomato;
			}
			

效果图：

希望大家多多支持，后续。。。。。。