1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

flex弹性盒模型布局

<!DOCTYPE html>      <html>      	<head>      		<meta charset="UTF-8">      		<title></title>      		<style type="text/css">      			*{      				padding: 0;      				margin: 0;      			}      			ul{      				border: 2px solid darkblue;      				/*将外层容器转换成弹性盒模型*/      				display: flex;      			}      			ul li{      				width: 200px;      				height: 100px;      				border: 1px solid darkgreen;      				background: darkgreen;      				margin: 10px;      				list-style: none;      				text-align: center;      				line-height: 100px;      				color: white;      				font-size: 30px;      			}      		</style>      	</head>      	<body>      		<!--弹性盒模型容器中的项目默认在主轴上排列      			子元素默认都排列在主轴上,不换行      		如果项目总宽度小于容器宽度,就正常排列,按照设置的宽度      		如果项目总宽度大于容器宽度,那么子元素就均分容器宽度,设置宽度无效-->      		<ul>      			<li>1</li>      			<li>2</li>      			<li>3</li>      			<li>4</li>      			<li>5</li>      			<li>5</li>      		</ul>      	</body>      </html>

主轴方向

<!DOCTYPE html>      <html>      	<head>      		<meta charset="UTF-8">      		<title></title>      		<style type="text/css">      			*{      				padding: 0;      				margin: 0;      			}      			ul{      				margin: 0 auto;      				width: 1100px;      				height: 300px;      				border: 2px solid darkblue;      				/*将外层容器转换成弹性盒模型*/      				display: flex;      				flex-direction: row;      			}      			ul li{      				width: 200px;      				height: 100px;      				border: 1px solid darkgreen;      				background: darkgreen;      				margin: 10px;      				list-style: none;      				text-align: center;      				line-height: 100px;      				color: white;      				font-size: 30px;      			}      		</style>      	</head>      	<body>      		<!--弹性盒模型容器中的项目默认在主轴上排列      			子元素默认都排列在主轴上,不换行      		如果项目总宽度小于容器宽度,就正常排列,按照设置的宽度      		如果项目总宽度大于容器宽度,那么子元素就均分容器宽度,设置宽度无效-->      		<ul>      			<li>1</li>      			<li>2</li>      			<li>3</li>      			<li>4</li>      			<li>5</li>      			<li>5</li>      		</ul>      	</body>      </html>

主轴上的排列方式

<!DOCTYPE html>      <html>      	<head>      		<meta charset="UTF-8">      		<title></title>      		<style type="text/css">      			*{      				padding: 0;      				margin: 0;      			}      			ul{      				margin: 0 auto;      				width: 1100px;      				height: 300px;      				border: 2px solid darkblue;      				/*将外层容器转换成弹性盒模型*/      				display: flex;      				/*flex-direction: row;*/      				/*justify-content: space-around; 均分*/      				justify-content: space-between; /* 挨着左右两端均分*/      			}      			ul li{      				width: 150px;      				height: 100px;      				border: 1px solid darkgreen;      				background: darkgreen;      				/*margin: 10px;*/      				border: 2px solid palevioletred;      				list-style: none;      				text-align: center;      				line-height: 100px;      				color: white;      				font-size: 30px;      			}      		</style>      	</head>      	<body>      		<!--弹性盒模型容器中的项目默认在主轴上排列      			子元素默认都排列在主轴上,不换行      		如果项目总宽度小于容器宽度,就正常排列,按照设置的宽度      		如果项目总宽度大于容器宽度,那么子元素就均分容器宽度,设置宽度无效-->      		<ul>      			<li>1</li>      			<li>2</li>      			<li>3</li>      			<li>4</li>      			<li>5</li>      			<li>5</li>      		</ul>      	</body>      </html>

交叉轴上的对齐方式

<!DOCTYPE html>      <html>      	<head>      		<meta charset="UTF-8">      		<title></title>      		<style type="text/css">      			*{      				padding: 0;      				margin: 0;      			}      			ul{      				margin: 0 auto;      				width: 1100px;      				height: 300px;      				border: 2px solid darkblue;      				/*将外层容器转换成弹性盒模型*/      				display: flex;      				/*flex-direction: row;*/      				/*justify-content: space-around; 均分*/      				justify-content: space-between; /* 挨着左右两端均分*/      				align-items: center;      				flex-wrap: wrap;  /*换行*/      			}      			ul li{      				width: 200px;      				height: 100px;      				border: 1px solid darkgreen;      				background: darkgreen;      				/*margin: 10px;*/      				border: 2px solid palevioletred;      				list-style: none;      				text-align: center;      				line-height: 100px;      				color: white;      				font-size: 30px;      			}      		</style>      	</head>      	<body>      		<!--弹性盒模型容器中的项目默认在主轴上排列      			子元素默认都排列在主轴上,不换行      		如果项目总宽度小于容器宽度,就正常排列,按照设置的宽度      		如果项目总宽度大于容器宽度,那么子元素就均分容器宽度,设置宽度无效-->      		<ul>      			<li>1</li>      			<li>2</li>      			<li>3</li>      			<li>4</li>      			<li>5</li>      			<li>6</li>      			<li>7</li>      			<li>8</li>      			<li>9</li>      			<li>10</li>      		</ul>      	</body>      </html>

多根轴线的对齐方式

<!DOCTYPE html>      <html>      	<head>      		<meta charset="UTF-8">      		<title></title>      		<style type="text/css">      			*{      				padding: 0;      				margin: 0;      			}      			ul{      				margin: 0 auto;      				width: 1100px;      				height: 300px;      				border: 2px solid darkblue;      				/*将外层容器转换成弹性盒模型*/      				display: flex;      				/*flex-direction: row;*/      				/*justify-content: space-around; 均分*/      				justify-content: space-between; /* 挨着左右两端均分*/      				align-items: center;   /*居中对齐弹性盒*/      				flex-wrap: wrap;  /*换行*/      				align-content: space-around;  /*多根轴线中间平分*/      			}      			ul li{      				width: 200px;      				height: 100px;      				border: 1px solid darkgreen;      				background: darkgreen;      				/*margin: 10px;*/      				border: 2px solid palevioletred;      				list-style: none;      				text-align: center;      				line-height: 100px;      				color: white;      				font-size: 30px;      			}      		</style>      	</head>      	<body>      		<!--弹性盒模型容器中的项目默认在主轴上排列      			子元素默认都排列在主轴上,不换行      		如果项目总宽度小于容器宽度,就正常排列,按照设置的宽度      		如果项目总宽度大于容器宽度,那么子元素就均分容器宽度,设置宽度无效-->      		<ul>      			<li>1</li>      			<li>2</li>      			<li>3</li>      			<li>4</li>      			<li>5</li>      			<li>6</li>      			<li>7</li>      			<li>8</li>      			<li>9</li>      			<li>10</li>      		</ul>      	</body>      </html>

原文链接:https://www.qiquanji.com/post/7763.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: