Html 当某些元素长度较长导致其他元素移动时，如何使空间元素保持不变

我使用flexbox，我有我想要的方式排列的项目，但每当文本较长时，它会导致其他元素移出行。我将在一张图片中展示我的意思

如您所见，所有冷冲泡的项目都是相同的文本长度，因此所有项目都是对齐的，但文本较长的项目“Coffee Americano”会导致其他元素移动。我试图让它的垃圾图标，大小选择框，价格是相同的位置。我试过保证金自动，但它不起作用，我也试过绝对位置，但那不起作用。感谢您的帮助

HTML:

---

您可以使用网格来确保它们都相等，这样就不需要向每个

p

或特定标记添加代码来摆弄对齐方式。我只是添加了以下代码：

  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;

到css中的

.item1、.item2、.item3、.item4、.item5、.item6、.item7、.item8

代码

看一看:

.cartcontainer{
显示器：flex；
证明内容：中心；
对齐项目：居中；
边缘顶部：10px；
弯曲方向：立柱；
}
.购物车{
对齐项目：居中；
文本对齐：左对齐；
弯曲方向：立柱；
边缘顶部：5px；
}
.项目1，
.项目2，
.项目3，
.项目4，
.项目5，
.项目6，
.项目7，
.项目8{
显示：网格；
网格模板柱：1fr 1fr 1fr 1fr；
对齐项目：居中；
宽度：400px；
对正内容：空间均匀；
}
.尺寸{
宽度：60px；
填充：0px；
}

您的购物车：
冷冲泡

大小
s
M
L
$4.00
冷冲泡

大小
s
M
L
$4.00
冷冲泡

大小
s
M
L
$4.00
冷冲泡

大小
s
M
L
$4.00
冷冲泡

大小
s
M
L
$4.00
冷冲泡

大小
s
M
L
$4.00
美式咖啡

大小
s
M
L
$4.00
冷冲泡

大小
s
M
L
$4.00

我将

证明内容：中心并将某些百分比和固定宽度应用于元素


.cartcontainer{
显示器：flex；
证明内容：中心；
对齐项目：居中；
边缘顶部：10px；
弯曲方向：立柱；
}
.购物车{
显示器：flex；
对齐项目：居中；
文本对齐：左对齐；
弯曲方向：立柱；
边缘顶部：5px；
}
.cart>div{
显示器：flex；
对齐项目：居中；
宽度：400px；
证明内容：中心；
}
.cart>div>a{
显示：块；
宽度：30px；
}
.cart>div>p{
宽度：100%；
}
.购物车p.价格{
宽度：30%；
文本对齐：右对齐；
}
.尺寸{
宽度：60px；
填充：0px；
利润率：0.10px；
}

您的购物车：
咖啡卡布奇诺/无糖
大小
s
M
L
$4.00
冷冲泡

大小
s
M
L
$4.00
腌肉和蛋卷

大小
s
M
L
$14.00
冷冲泡

大小
s
M
L
$4.00
冷冲泡

大小
s
M
L
$4.00
冷冲泡

大小
s
M
L
$4.00
美式咖啡

大小
s
M
L
$4.00
冷冲泡

大小
s
M
L
$4.00
您可以为每个p标记添加最大宽度属性。试试这个代码。如果它不是你最喜欢的，请告诉我


.cartcontainer{
显示器：flex；
调整内容：中心
 .cartcontainer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  flex-direction: column;
}

.cart {
  display: flex;
  align-items: center;
  text-align: left;
  flex-direction: column;
  margin-top: 5px;
}

.item1,
.item2,
.item3,
.item4,
.item5,
.item6,
.item7,
.item8 {
  display: flex;
  align-items: center;
  width: 400px;
  justify-content: space-evenly;
}

.size {
  width: 60px;
  padding: 0px;
}

  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;