justify-content: flex-end;
时间: 2024-03-27 09:31:32 浏览: 49
flex布局 父元素属性之 justify-content 主轴上子元素的排列方式
5星 · 资源好评率100%
`justify-content: flex-end;`是CSS中flex布局的一个属性,它用于设置弹性容器中子元素在主轴上的对齐方式,将子元素沿着主轴的结束位置对齐。具体来说,它会将子元素沿着主轴的结束位置对齐,这意味着子元素会靠近弹性容器的右侧边缘(如果主轴是从左到右的话)。以下是一个例子:
```css
.container {
display: flex;
justify-content: flex-end;
}
.container div {
width: 50px;
height: 50px;
background-color: red;
margin: 10px;
}
```
在这个例子中,`.container`是一个弹性容器,它包含了多个`div`子元素。由于设置了`justify-content: flex-end;`,子元素会沿着主轴的结束位置对齐,也就是靠近右侧边缘。你可以在这个[CodePen](https://codepen.io/pen/?editors=1100)上查看完整的例子。
阅读全文