<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex实现在交叉轴上的排列</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.fk>div{
width: 200px;
height: 50px;
background: #D2691E;
}
.fk{
width: 1200px;
height: 427px;
border: 2px solid crimson;
margin: 90px auto;
display: flex;
/*设置主轴上的排列*/
flex-wrap: wrap;
/*justify-content: space-between; */
/*设置交叉轴上的排列*/
/*align-items: flex-start;*/ /*顶部*/
/*align-items: flex-end; *//*顶部*/
align-items: center; /*交叉轴中点*/
/*align-items: baseline; */ /*项目第一行文字的基线对齐*/
/*align-items: stretch;*//*如果项目没有设置高度或者为auto，那么会将项目高度默认为父级元素高度*/
}
</style>
</head>
<body>
<div class="fk">
<!--<div> 1 </div>
<div style="height: 160px;"> 2 </div>
<div style="height: 170px;"> 3 </div>
<div style="height: 180px;"> 4 </div>
<div style="height: 190px;"> 5 </div>-->
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>flex实现在交叉轴上的排列</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.fk>div{
width: 200px;
height: 50px;
background: #D2691E;
}
.fk{
width: 1200px;
height: 427px;
border: 2px solid crimson;
margin: 90px auto;
display: flex;
/*设置主轴上的排列*/
flex-wrap: wrap;
/*justify-content: space-between; */
/*设置交叉轴上的排列*/
/*align-items: flex-start;*/ /*顶部*/
/*align-items: flex-end; *//*顶部*/
align-items: center; /*交叉轴中点*/
/*align-items: baseline; */ /*项目第一行文字的基线对齐*/
/*align-items: stretch;*//*如果项目没有设置高度或者为auto，那么会将项目高度默认为父级元素高度*/
}
</style>
</head>
<body>
<div class="fk">
<!--<div> 1 </div>
<div style="height: 160px;"> 2 </div>
<div style="height: 170px;"> 3 </div>
<div style="height: 180px;"> 4 </div>
<div style="height: 190px;"> 5 </div>-->
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>