css之flex实例学习

1、一个圆点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.outer{
				display:flex;
				width: 300px;
				height: 300px;
				border:1px solid black;
			}
			.inner{
				width: 100px;
				height: 100px;
				text-align: center;
				line-height: 100px;
				background-color: burlywood;
				border-radius: 50px;
			}
		
		</style>
	</head>
	<body>
		
		<div class="outer">
			<div class="inner">1</div>
		</div>
	</body>
</html>

css之flex实例学习

2、两个圆点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.outer{
				display:flex;
				/*flex-wrap: wrap;*/
				justify-content: space-between;
				width: 300px;
				height: 300px;
				border:1px solid black;
			}
			.inner{
				width: 100px;
				height: 100px;
				text-align: center;
				line-height: 100px;
				background-color: burlywood;
				border-radius: 50px;
			}
		
		</style>
	</head>
	<body>
		
		<div class="outer">
			<div class="inner">1</div>
			<div class="inner">2</div>
			
			
		</div>
	</body>
</html>

css之flex实例学习

<style type="text/css">
			.outer{
				display:flex;
				/*flex-wrap: wrap;*/
				justify-content: space-between;
				flex-direction: column;
				width: 300px;
				height: 300px;
				border:1px solid black;
			}
			.inner{
				width: 100px;
				height: 100px;
				text-align: center;
				line-height: 100px;
				background-color: burlywood;
				border-radius: 50px;
			}
		
		</style>

css之flex实例学习

<style type="text/css">
.outer{
				display:flex;
				/*flex-wrap: wrap;*/
				/*justify-content: space-between;*/
				/*flex-direction: column;*/
				width: 300px;
				height: 300px;
				border:1px solid black;
			}
			.inner{
				width: 100px;
				height: 100px;
				text-align: center;
				line-height: 100px;
				background-color: burlywood;
				border-radius: 50px;
			}
			.inner:nth-child(2){
				align-self:center;
			}
		
		</style>

css之flex实例学习

<style type="text/css">
.outer{
				display:flex;
				/*flex-wrap: wrap;*/
				justify-content: space-between;
				/*flex-direction: column;*/
				width: 300px;
				height: 300px;
				border:1px solid black;
			}
			.inner{
				width: 100px;
				height: 100px;
				text-align: center;
				line-height: 100px;
				background-color: burlywood;
				border-radius: 50px;
			}
			.inner:nth-child(2){
				align-self:flex-end;
			}
		
		</style>

css之flex实例学习

<style type="text/css">
			.outer{
				display:flex;
				/*flex-wrap: wrap;*/
				/*justify-content: space-between;*/
				/*flex-direction: column;*/
				width: 300px;
				height: 300px;
				border:1px solid black;
			}
			.inner{
				width: 100px;
				height: 100px;
				text-align: center;
				line-height: 100px;
				background-color: burlywood;
				border-radius: 50px;
			}
			.inner:nth-child(2){
				align-self:flex-end;
			}
		
		</style>

css之flex实例学习

3、flex属性使用

<style type="text/css">
			.outer{
				display:flex;
				width: 300px;
				height: 300px;
				border:1px solid black;
			}
			.inner{
				width: 50px;
				height: 50px;
				text-align: center;
				line-height: 50px;
				background-color: burlywood;
				border-radius: 25px;
			}
			.inner:nth-child(1){
				flex:2;
				order:4;
			}
			.inner:nth-child(2){
				flex:1;
				order: 10;
				
			}
			.inner:nth-child(3){
				flex:1;
				order: 8;
			}
		
		</style>

css之flex实例学习