在这 div {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
width: 800px;
height: 1000px;
border: 1px solid red;
}
div span {
margin: 10px 10px;
width: 30px;
height: 100px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
在这里插入图片描述
因为在css中没有justify-self属性，所以无法操作水平的单个元素，这时可以给想单独设置的元素添加magrin-left(right):atuo,就可以实现左对齐或右对齐,因为margin-right 不设置的话默认是0，父容器width 定宽之后，margin-right取值为 auto ，则自动占据了剩余的全部宽度
给第三个span添加
div span:nth-child(3) {
margin-left: auto;
}
此时网页效果
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
