<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>