如何将项目与flex容器的起点和中心对齐？
Coyolero
迈克尔·本杰明
该justify-content和align-content属性可以仅适用于柔性容器，但影响只是柔性的项目。因此，要使容器居中，必须将其应用于（，在本例中）justify-content: center的父级。.flex-containerbody
或者，您可以简单地在上使用auto边距.flex-container。
该align-content属性沿flex容器的横轴（在本例中为垂直平面）工作，并且不需要固定布局。
试试这个：
body {
display: flex;
justify-content: center;
}
.flex-container {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
或这个：
.flex-container {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
margin: 0 auto;
}
更新（基于注释）
要解决容器右侧多余的空格的问题，请参见此处：
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
CSS flex-将项目向左对齐，并将容器向中心对齐
- 2
如何将列表中心与 html 和 css 对齐？
- 3
如何将css表对齐中心
- 4
如何将texview与中心对齐
- 5
如何将这些元素与中心对齐？
- 6
如何将网页的正文对齐中心？
- 7
如何将内容与页面中心对齐？
- 8
如何将标头项目与HTML和SCSS对齐
- 9
如何将容器放在列的中心？
- 10
如何将一个项目与其父中心的右边对齐？（Android版式）
- 11
如何将文本与父对齐小部件的中心对齐
- 12
如何将文本与 flex-basis 项目的底部对齐？
- 13
水平中心对齐比其容器大的项目
- 14
如何将弹性项目右对齐？
- 15
如何将项目彼此对齐
- 16
在flex容器中将项目右对齐
- 17
CSS：如何将文本对齐到图像的中心（左侧）
- 18
在Graphviz中，如何将边缘与节点的顶部中心对齐？
- 19
如何将文本与列表中边框的中心对齐？
- 20
如何将ul列表对齐为中心的按钮
- 21
如何将智能对象层中心与画布对齐？
- 22
如何将表格正确对齐中心？
- 23
如何将引导程序中的列对齐到中心？
- 24
如何将输入对齐到 UserInfoPage 的中心？
- 25
如何将图像视图的中心与视图组的顶部对齐？
- 26
如何将浮动div移动到容器的中心
- 27
用flex对齐中心和右边？
- 28
垂直和水平中心与 Flex 框对齐
- 29
如何将5个盒子与flex对齐？
我来说两句