26-lao-弹性盒子布局的多行子元素的对齐方式_弹性盒多行元素顶部对齐-优快云博客

本文通过实例详细介绍了如何使用CSS的flexbox布局中align-content属性来设置多行子元素沿侧轴方向的对齐方式，包括顶部对齐、底部对齐、居中对齐、两端对齐及平均分布。
<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			.wrap {
				width: 960px;
				border: 1px solid #ccc;
				margin: 5px auto;
				text-align: center;
			}
			
			.wrap .hd {
				height: 50px;
				border: 1px solid #ccc;
				background-color: #EE82EE;
				font: 16px/1.5 "微软雅黑";
				opacity: .8;
				/*设置模糊度*/
			}
			/*加入弹性盒子*/
			
			.wrap .bd {
				display: flex;
			}
			
			.wrap .bd .child {
				width: 100px;
				height: 100px;
				border: 3px solid #333333;
				background-color: #7FFFD4;
				/*padding-top: 15px;*/
			}
			
			.row {
				flex-direction: row;
			}
			
			.row-reverse {
				flex-direction: row-reverse;
			}
			
			.column {
				flex-direction: column;
			}
			
			.column-reverse {
				flex-direction: column-reverse;
			}
			
			.flex-wrap {
				flex-wrap: wrap;
			}
			
			.flex-nowrap {
				flex-wrap: nowrap;
			}
			
			.flex-wrap-reverse {
				flex-wrap: wrap-reverse;
			}
			/*=======设置父盒子的  子元素的排列间隙==========*/
			
			.justify-content-flex-start {
				justify-content: flex-start;
				/*默认左对齐*/
			}
			
			.justify-content-flex-end {
				justify-content: flex-end;
				/*右对齐*/
			}
			
			.justify-content-center {
				justify-content: center;
				/*居中对齐*/
			}
			
			.justify-content-space-around {
				justify-content: space-around;
				/* 每个项目两侧间隔相等 */
			}
			
			.justify-content-space-between {
				justify-content: space-between;
				/* 两端对齐*/
			}
			/*=========设置父盒子侧轴 子元素对齐方式=========*/
			
			.align-items-flex-start {
				align-items: flex-start;
				/* 顶部对齐*/
			}
			
			.align-items-flex-end {
				align-items: flex-end;
				/* 底部对齐*/
			}
			
			.align-items-center {
				align-items: center;
				/* 中心对齐*/
			}
			
			.align-items-baseline {
				align-items: baseline;
				/* 中心对齐*/
			}
			
			.align-items-stretch {
				align-items: stretch;
				/* 中心对齐*/
			}
			/*S=>设置父盒子 多行子元素垂直对齐方式*/
			.align-content-flex-start{
				align-content: flex-start;
			}
			.align-content-flex-end{
				align-content: flex-end;
			}
			.align-content-center{
				align-content:center;
			}
			.align-content-space-between{
				align-content: space-between;
			}
			.align-content-space-around{
				align-content: space-around;
			}
			.align-content-sstretch{
				align-content: stretch;
			}
			
			/*E=>设置父盒子 多行子元素垂直对齐方式*/
		</style>
	</head>

	<body>
		<h3>5、多行子元素的对齐方式</h3>
		<hr />
		
		<div class="wrap">
			<div class="hd">
				多行子元素的对齐方式 align-content: flex-start;
			</div>
			<div class="bd row flex-wrap  align-content-flex-start" style="height: 450px;">
				<div class="child"> 1</div>
				<div class="child">2</div>
				<div class="child">3</div>
				<div class="child">4</div>
				<div class="child">5</div>
				<div class="child">6</div>
				<div class="child">7</div>
				<div class="child">8</div>
				<div class="child">9</div>
				<div class="child">10</div>
				<div class="child">11</div>
				<div class="child">12</div>
				<div class="child">13</div>
				<div class="child">14</div>
				<div class="child">15</div>
				<div class="child">16</div>
				<div class="child">17</div>
				<div class="child">18</div>
				<div class="child">19</div>
				<div class="child">20</div>
				<div class="child">21</div>
				<div class="child">22</div>
				<div class="child">23</div>
				<div class="child">24</div>
				<div class="child">25</div>
			</div>
			<div class="hd">
				多行子元素的对齐方式 align-content: flex-end;
			</div>
			<div class="bd row flex-wrap  align-content-flex-end" style="height: 450px;">
				<div class="child"> 1</div>
				<div class="child">2</div>
				<div class="child">3</div>
				<div class="child">4</div>
				<div class="child">5</div>
				<div class="child">6</div>
				<div class="child">7</div>
				<div class="child">8</div>
				<div class="child">9</div>
				<div class="child">10</div>
				<div class="child">11</div>
				<div class="child">12</div>
				<div class="child">13</div>
				<div class="child">14</div>
				<div class="child">15</div>
				<div class="child">16</div>
				<div class="child">17</div>
				<div class="child">18</div>
				<div class="child">19</div>
				<div class="child">20</div>
				<div class="child">21</div>
				<div class="child">22</div>
				<div class="child">23</div>
				<div class="child">24</div>
				<div class="child">25</div>
			</div>
			<div class="hd">
				多行子元素的对齐方式 align-content: center;
			</div>
			<div class="bd row flex-wrap  align-content-center" style="height: 450px;">
				<div class="child"> 1</div>
				<div class="child">2</div>
				<div class="child">3</div>
				<div class="child">4</div>
				<div class="child">5</div>
				<div class="child">6</div>
				<div class="child">7</div>
				<div class="child">8</div>
				<div class="child">9</div>
				<div class="child">10</div>
				<div class="child">11</div>
				<div class="child">12</div>
				<div class="child">13</div>
				<div class="child">14</div>
				<div class="child">15</div>
				<div class="child">16</div>
				<div class="child">17</div>
				<div class="child">18</div>
				<div class="child">19</div>
				<div class="child">20</div>
				<div class="child">21</div>
				<div class="child">22</div>
				<div class="child">23</div>
				<div class="child">24</div>
				<div class="child">25</div>
			</div>
			<div class="hd">
				多行子元素的对齐方式 align-content: space-between;
			</div>
			<div class="bd row flex-wrap  align-content-space-between" style="height: 450px;">
				<div class="child"> 1</div>
				<div class="child">2</div>
				<div class="child">3</div>
				<div class="child">4</div>
				<div class="child">5</div>
				<div class="child">6</div>
				<div class="child">7</div>
				<div class="child">8</div>
				<div class="child">9</div>
				<div class="child">10</div>
				<div class="child">11</div>
				<div class="child">12</div>
				<div class="child">13</div>
				<div class="child">14</div>
				<div class="child">15</div>
				<div class="child">16</div>
				<div class="child">17</div>
				<div class="child">18</div>
				<div class="child">19</div>
				<div class="child">20</div>
				<div class="child">21</div>
				<div class="child">22</div>
				<div class="child">23</div>
				<div class="child">24</div>
				<div class="child">25</div>
			</div>
			<div class="hd">
				多行子元素的对齐方式 align-content: space-around;
			</div>
			<div class="bd row flex-wrap justify-content-center  align-content-space-around" style="height: 450px;">
				<div class="child"> 1</div>
				<div class="child">2</div>
				<div class="child">3</div>
				<div class="child">4</div>
				<div class="child">5</div>
				<div class="child">6</div>
				<div class="child">7</div>
				<div class="child">8</div>
				<div class="child">9</div>
				<div class="child">10</div>
				<div class="child">11</div>
				<div class="child">12</div>
				<div class="child">13</div>
				<div class="child">14</div>
				<div class="child">15</div>
				<div class="child">16</div>
				<div class="child">17</div>
				<div class="child">18</div>
				<div class="child">19</div>
				<div class="child">20</div>
				<div class="child">21</div>
				<div class="child">22</div>
				<div class="child">23</div>
				<div class="child">24</div>
				<div class="child">25</div>
			</div>
		  <div class="hd">
				多行子元素的对齐方式 align-content: sstretch;
			</div>
			<div class="bd row flex-wrap  align-content-stretch" style="height: 450px;">
				<div class="child"> 1</div>
				<div class="child">2</div>
				<div class="child">3</div>
				<div class="child">4</div>
				<div class="child">5</div>
				<div class="child">6</div>
				<div class="child">7</div>
				<div class="child">8</div>
				<div class="child">9</div>
				<div class="child">10</div>
				<div class="child">11</div>
				<div class="child">12</div>
				<div class="child">13</div>
				<div class="child">14</div>
				<div class="child">15</div>
				<div class="child">16</div>
				<div class="child">17</div>
				<div class="child">18</div>
				<div class="child">19</div>
				<div class="child">20</div>
				<div class="child">21</div>
				<div class="child">22</div>
				<div class="child">23</div>
				<div class="child">24</div>
				<div class="child">25</div>
			</div> 
		
	     </div>
		
		
		
	</body>