1.右对齐
#pond {
display: flex; <!--展示flex属性-->
justify-content:flex-end ;<!--右对齐-->
}
青蛙右对齐了
2.中心对齐
#pond {
display: flex;
justify-content:center;<!--中心对齐-->
}
中心对齐了
4.两个项目两侧的间隔相等
#pond {
display: flex;
justify-content:space-around;
}
效果
5.两端对齐,项目之间的间隔相等
#pond {
display: flex;
justify-content:space-between;
}
效果图:
6.左对齐
#pong {
dispaly: flex;
justify-content:flex-start;
}