Html 使用Css flexbox对齐项目

我想像这样对齐项目

将4个项目放在一行，将3个项目放在下一行，但我想居中对齐

虽然我固定为25%，但它不能正常工作

请看一看

.flex容器{
显示器：flex；
柔性流：行换行；
文本对齐：居中；
宽度：100%；
}
.四分之一{
宽度：24.6%；
填充：20px；
背景色：#b5d46e；
边框：3倍纯白；
颜色：白色；
字号：1.5em；
文本对齐：居中；
}

1.
2.
3.
4.
5.
6.
7.
8.

我会将所需的每套

.quarter

元素包装成一行，放在它们自己的弹性盒中。确保为每个

.quarter

提供

flex:1属性而不是
宽度：25%
属性

<div class='flex-container'>
  <div class='quarter flex-item'>
    <h3>1</h3>
  </div>
  <div class='quarter flex-item'>
    <h3>2</h3>
  </div>
  <div class='quarter flex-item'>
    <h3>3</h3>
  </div>
  <div class='quarter flex-item'>
    <h3>4</h3>
  </div>

例如，这是第一行的HTML。所有代码的提琴参考，包括
flex:1的放置位置属性

<div class='flex-container'>
  <div class='quarter flex-item'>
    <h3>1</h3>
  </div>
  <div class='quarter flex-item'>
    <h3>2</h3>
  </div>
  <div class='quarter flex-item'>
    <h3>3</h3>
  </div>
  <div class='quarter flex-item'>
    <h3>4</h3>
  </div>


1.
2.
3.
4.


将4个项目放在一行，将3个项目放在下一行，但我想居中对齐

我不确定第八项我们该怎么办，但是

首先，我们使用
框大小：边框框
在宽度计算中包括填充/边框，我们可以将宽度（或flex属性）设置为：

…我们就完了


*{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
.柔性容器{
显示器：flex；
柔性流：行换行；
证明内容：中心；
宽度：100%；
}
.四分之一{
弹性：01.25%；
填充：20px；
背景色：#b5d46e；
边框：3倍纯白；
颜色：白色；
字号：1.5em；
文本对齐：居中；
}

1.
2.
3.
4.
5.
6.
7.
ADD box size:border box到类中。我删除了我的答案，因为我认为他想要4/3/1，而@Wowsk有一个比我更好的答案（对于这种方法）。如此愚蠢：P