Html Flexbox，卡片与div外部文本之间的间距

在发布这篇文章之前，我看到了几个问题，包括

还有。然而，我不知道如何解决我制作的一些卡片的渲染问题

问题

卡的行为不正常：

• 文本有时会在卡片外面（我试着使用

  分词：保留所有的
  ），我不明白为什么

• 有时两张卡之间的间距为0像素

预期行为

卡片内有文字，并尊重它们之间的空间

代码

.wrapper{
最小高度：100vh；
背景颜色：浅灰色；
显示器：flex；
弯曲方向：立柱；
}
.内容{
高度：自动；
弹性：1；
背景：#FAFAFA；
显示器：flex；
颜色：#000；
}
.栏目{
显示器：flex；
弹性：1；
}
梅因先生{
z指数：1；
弹性：1；
背景：#eee；
}
.侧边栏{
溢出：自动；
文本对齐：居中；
z指数：1；
身高：100%；
宽度：40%；
背景：白色；
}
.头衔{
字号:25 ;；
边缘底部：-20px；
宽度：100%；
}
.照片{
边框左上半径：10px；
边框右上角半径：10px；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
宽度：100%；
身高：50%；
}
.评级{
字体大小：20px；
}
.卡片{
光标：指针；
文本溢出：省略号；
背景色：白色；
文字装饰：无；
边界半径：10px；
盒影：1px 1px 50px黑色；
保证金：自动；
宽度：55%；
高度：320px；
显示：-webkit flex；
显示器：flex；
-webkit柔性方向：列；
弯曲方向：立柱；
-webkit对齐项目：居中；
对齐项目：居中；
-webkit内容：中心；
证明内容：中心；
边缘顶部：50px；
边缘底部：50px；
断字：保留一切；
填充：0px；
}
a{
文字装饰：无；
文字装饰颜色：黑色；
颜色：黑色；
}
.地址{
字体大小：20px；
填充：20px；
}

再狭窄










搜索最近的餐馆
提托洛德尔里斯托兰特酒店

由于您的代码乱七八糟，我无法正确地看到它并给您一个工作示例，但您的问题听起来很简单。要查看卡片之间的空格，您需要两件事：

使用

justify content:space-between设置容器

为每张

卡留出空白

下面是一个简单的例子：

.container{
宽度：80%；
边框：1px纯黑；
填充：10px；
显示器：flex；
证明内容：之间的空间；
}
.卡片{
背景色：#bada55；
柔性生长：1；
利润率：10px；
高度：50px；
}

卡1
卡2

在codepen中有“Google Maps JavaScript API错误：InvalidKeyMapError”，因此很难看到您的卡布局当前的样子。因为这似乎是一个CSS问题，也许你可以粘贴一些从搜索中生成的静态html？我在：

Uncaught SyntaxError:Unexpected token@robbiearesest中得到了这个错误，很抱歉昨天的答案我没有很好地阅读你的评论。现在我添加了一些静态卡片html，你可以看到这些卡片无法读取溢出属性+它们太近了。如果卡片中有很多文本，就会溢出。