<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex实现在主轴上的排列</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.fk>img{
width: 288px;
}
.fk{
width: 1200px;
height: 427px;
border: 2px solid chocolate;
margin: 90px auto;
display: flex;
/*设置项目在主轴上排列*/
/*justify-content: center;*/ /*父元素内部项目居中*/
/*justify-content: flex-start;*//*父元素内部项目左对齐*/
/*justify-content: flex-end; */ /*父元素内部项目右对齐*/
justify-content: space-between;/*两端对齐*/
/*justify-content: space-around;*/ /*四周对齐*/
}
</style>
</head>
<body>
<div class="fk">
<img src="imgages/sdgg_10.jpg"/>
<img src="imgages/sdgg_12.jpg" />
<img src="imgages/sdgg_14.jpg" />
<img src="imgages/sdsd_08.jpg" />
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>flex实现在主轴上的排列</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.fk>img{
width: 288px;
}
.fk{
width: 1200px;
height: 427px;
border: 2px solid chocolate;
margin: 90px auto;
display: flex;
/*设置项目在主轴上排列*/
/*justify-content: center;*/ /*父元素内部项目居中*/
/*justify-content: flex-start;*//*父元素内部项目左对齐*/
/*justify-content: flex-end; */ /*父元素内部项目右对齐*/
justify-content: space-between;/*两端对齐*/
/*justify-content: space-around;*/ /*四周对齐*/
}
</style>
</head>
<body>
<div class="fk">
<img src="imgages/sdgg_10.jpg"/>
<img src="imgages/sdgg_12.jpg" />
<img src="imgages/sdgg_14.jpg" />
<img src="imgages/sdsd_08.jpg" />
</div>
</body>
</html>