Css 属性flex wrap无法正常工作？

我正在努力理解flexbox。我的目标是在每行上对齐3个项目。 我必须使用属性

flex-wrap:wrap但是，我的问题是我在第一行对齐了4个项目

.container{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap : wrap; 
}

提前感谢您的回答


html，正文{
填充：0；
保证金：0；
}
*{
框大小：边框框；
}
.集装箱{
宽度：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
柔性包装：包装；
}
/*干部素质*/
.盒子{
边缘顶端：33像素；
宽度：21%/*
高度：100px*/
边框：1px实心rgba（0,0,0,07）；
背景：红色；
文本对齐：居中；
}
.container>.box{
右边距：20px；
}
.头衔{
颜色：#103D65；
字号：28px；
}
.说明{
字体大小：16px；
填充顶部：10px；
垫底：35px；
}
艾康先生{
宽度：100px；
高度：100px；
背景：#F4B7DB；
边界半径：50%；
利润率：10px自动；
}

治疗情绪
Lorem ipsum dolor坐在amet elit。我不知道。设施性库拉比图尔酒店
治疗情绪
Lorem ipsum dolor坐在amet elit。我不知道。设施性库拉比图尔酒店
治疗情绪
Lorem ipsum dolor坐在amet elit。我不知道。设施性库拉比图尔酒店
治疗情绪
Lorem ipsum dolor坐在amet elit。我不知道。设施性库拉比图尔酒店
治疗情绪
Lorem ipsum dolor坐在amet elit。我不知道。设施性库拉比图尔酒店
治疗情绪
Lorem ipsum dolor坐在amet elit。我不知道。设施性库拉比图尔酒店
您可以使用
.box
选择器上的
flex basis
属性。由于您希望每行有3个项目，因此可以将基值保持在30%-33%左右；考虑父容器的填充和边距

.box {
  flex-basis: 30%;
}


html，
身体{
填充：0；
保证金：0；
}
* {
框大小：边框框；
}
.集装箱{
宽度：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
柔性包装：包装；
}
/*干部素质*/
.盒子{
边缘顶端：33像素；
宽度：21%；
/*
高度：100px*/
边框：1px实心rgba（0,0,0,07）；
背景：红色；
文本对齐：居中；
/*占据总空间的30%*/
弹性基准：30%；
}
.container>.box{
右边距：20px；
}
.头衔{
颜色：#103D65；
字号：28px；
}
.说明{
字体大小：16px；
填充顶部：10px；
垫底：35px；
}
艾康先生{
宽度：100px；
高度：100px；
背景：#F4B7DB；
边界半径：50%；
利润率：10px自动；
}

治疗情绪
Lorem ipsum dolor坐在amet elit。我不知道。设施性库拉比图尔酒店
治疗情绪
Lorem ipsum dolor坐在amet elit。我不知道。设施性库拉比图尔酒店
治疗情绪
Lorem ipsum dolor坐在amet elit。我不知道。设施性库拉比图尔酒店
治疗情绪
Lorem ipsum dolor坐在amet elit。我不知道。设施性库拉比图尔酒店
治疗情绪
Lorem ipsum dolor坐在amet elit。我不知道。设施性库拉比图尔酒店
治疗情绪
Lorem ipsum dolor坐在amet elit。我不知道。设施性库拉比图尔酒店
您可以使用
.box
选择器上的
flex basis
属性。由于您希望每行有3个项目，因此可以将基值保持在30%-33%左右；考虑父容器的填充和边距

.box {
  flex-basis: 30%;
}


html，
身体{
填充：0；
保证金：0；
}
* {
框大小：边框框；
}
.集装箱{
宽度：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
柔性包装：包装；
}
/*干部素质*/
.盒子{
边缘顶端：33像素；
宽度：21%；
/*
高度：100px*/
边框：1px实心rgba（0,0,0,07）；
背景：红色；
文本对齐：居中；
/*占据总空间的30%*/
弹性基准：30%；
}
.container>.box{
右边距：20px；
}
.头衔{
颜色：#103D65；
字号：28px；
}
.说明{
字体大小：16px；
填充顶部：10px；
垫底：35px；
}
艾康先生{
宽度：100px；
高度：100px；
背景：#F4B7DB；
边界半径：50%；
利润率：10px自动；
}

治疗情绪
Lorem ipsum dolor坐在amet elit。我不知道。设施性库拉比图尔酒店
治疗情绪
Lorem ipsum dolor坐在amet elit。我不知道。设施性库拉比图尔酒店
治疗情绪
Lorem ipsum dolor坐在amet elit。我不知道。设施性库拉比图尔酒店
治疗情绪
Lorem ipsum dolor坐在amet elit。我不知道。设施性库拉比图尔酒店
治疗情绪
Lorem ipsum dolor坐在amet elit。我不知道。设施性库拉比图尔酒店
治疗情绪
Lorem ipsum dolor坐在amet elit。我不知道。设施性库拉比图尔酒店
.container{

  width:90%;
margin-left:auto;
margin-right:auto;
display:flex;
justify-content:flex-start;
align-items:center;
flex-wrap : wrap; 

}

.盒子{

}容器{

  width:90%;
margin-left:auto;
margin-right:auto;
display:flex;
justify-content:flex-start;
align-items:center;
flex-wrap : wrap; 

}

.盒子{

}
啊，好的，非常感谢你的解释。啊，好的，非常感谢你的解释。你预计会发生什么？你打算做什么