Flexbox，卡片之间的空间和div外的文本答案

【问题标题】：Flexbox, space between cards and text outside the divFlexbox，卡片之间的空间和div外的文本
【发布时间】：2018-10-04 17:58:20
【问题描述】：

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

还有guide to flex-box of css tricks。但是我不明白如何解决我制作的一些卡片的渲染问题。

问题

卡片的行为不正常：

文字有时会跑到卡片外面（我尝试使用word-break: keep all），但我不明白为什么
有时两张卡之间的间距为 0 像素。

预期行为

里面有文字的卡片，并且尊重它们之间的空间。

代码

.wrapper{
  min-height: 100vh;
  background-color: lightgray;
  display: flex;
  flex-direction: column;
}

.content {
  height:auto;
  flex: 1;
  background: #FAFAFA;
  display: flex;
  color: #000;
}
.columns{
  display: flex;
  flex: 1;
}
.main{
  z-index:1;
  flex: 1;
  background: #eee;
}
.sidebar{
    overflow: auto;
    text-align: center;
    z-index: 1;
    height: 100%;
  width: 40%;
  background: white;
}
.title{
    font-size: 25;
    margin-bottom: -20px;
    width: 100%;
}

.photo{
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 50%;
}

.rating{
    font-size: 20px;
}

.card {
    cursor: pointer;
    text-overflow: ellipsis;
    background-color: white;
    text-decoration: none;
    border-radius: 10px;
    box-shadow: 1px 1px 50px black;
    margin:auto;
    width: 55%;
    height: 320px;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
   margin-top: 50px;
   margin-bottom: 50px;
    word-break:keep-all;
    padding: 0px;
}

a{
    text-decoration: none;
    text-decoration-color: black;
    color: black;
}

.address{
    font-size: 20px;
    padding: 20px;
}

<html>
  <head>
    <title>Restosearch</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="style.css" rel="stylesheet" type="text/css">
  </head>

  <body>
      <!-- Menu down below -->
    <div class="circle"></div>
    <button class="btn">
      <span class="btn__line"></span>
      <span class="btn__line"></span>
      <span class="btn__line"></span>
    </button>
    <div class="full-menu">
      <div class="layer"></div>
      <nav class="nav">
        <ul class="nav__list">
          <li class="nav__item">
            <a href="#" class="nav__link">
              Home
            </a>
          </li>
          <li class="nav__item">
            <a href="#" class="nav__link">
              About
            </a>
          </li>
          <li class="nav__item">
            <a href="#" class="nav__link">
              Portfolio
            </a>
          </li>
          <li class="nav__item">
            <a href="#" class="nav__link">
              Contacts
            </a>
          </li>
        </ul>
      </nav>
    </div>
    <!-- Menu up above -->

    <!-- Input, maps and cards down below -->
    <main>
        <div class="container">
            <div class="box">
                <div>
                    <h2 style="">Search the closest restaurant</h2>
                </div>
            </div> 
        </div>
        <div class="downBox">
                    <input id="pac-input" class="controls" type="text" placeholder="insert here: yourNation, yourCity, yourStreet">
        </div>

        <div class="divider"></div>

        <div class="wrapper">
            <section class="content">
                <div class="columns">
                    <main class="main">
                        <div id="map"></div>
                    </main>
                    <aside class="sidebar" style="background-color: gainsboro">

                    </aside>
                </div>
            </section>
        </div>

        <div class="divider"></div>

        <!-- this section will appear only when you click on a card -->

        <!-- Ricorda di settare i css per queste sezioni, il titolo deve essere circa alto 20/ 30 %  -->
        <div class="wrapperTwo detail">
           <section class="content">
                <div class="columns">
                   <aside class="sidebarTwo" style="">
                         <div class="placeInfo">

                       </div>
                    </aside>
                    <main class="mainTwo">
                      <div class="detailtitle"><h2>Titolo del ristorante qua</h2></div>
                       <hr>
                        <div class="review">

                        </div>

                    </main>
                </div>
            </section>

        </div>

        <!-- Input, maps and cards up above -->
    </main>  
  </body>
  <script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
  <script src="script.js"> </script>
  <script src="https://maps.googleapis.com/maps/api/js?key=MyApi&libraries=places&callback=initAutocomplete"
         async defer></script>
</html>

每张卡片都是用这段代码动态生成的：

  $(".sidebar").append("<div class=\"card\" id=\"" + idPlace +"\"><img src=\"" + photoMarker + " \"class=\"photo\"><div class=\"title\"><h6>" + name +"</h6></div><div class=\"rating\"><p>Rating: "  + rating + "</div class=\"address\"><p>" + address + "<div class=\"space\"></div></p></div>");

这是 HTML 结构中生成的卡片：

<div class="card">
    <img src="https://images.pexels.com/photos/7919/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="photo">
    <div class="title"><h4></h4></div>
    <div class="rating"></div>
    <p></p>
</div>

Codepen

codepen here

关于此 codepen 的说明：我不明白为什么，但在 Chrome 中，将行布局到 div wrapper 中很好，但在 codepen 中却不是。我肯定错过了一些东西，所以任何建议都会非常感激。

更新

根据 cmets 中的建议，我更新了 codepen，现在您可以在右侧边栏中看到不同的卡片，并且您可以看到问题是：

文字超出卡片空间
卡片距离太近了
侧边栏无法读取溢出的属性，在我的 chrome 中，您可以看到侧边栏有一个垂直滚动条。

【问题讨论】：

在 codepen 中有“Google Maps JavaScript API 错误：InvalidKeyMapError”，所以很难看到你的卡片布局目前在那里。由于这似乎是一个 CSS 问题，也许您可以粘贴一些从您的搜索生成的静态 html？
我在console of forked pen：Uncaught SyntaxError: Unexpected token <YvAgOngXbpxA:2 收到此错误
@robbieAreBest，很抱歉昨天的回答我没有读好你的 cmets。现在我添加了一些静态卡片 html，您可以看到卡片无法读取溢出的属性 + 它们离得太近了。

标签： html css flexbox

【解决方案1】：

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

用justify-content: space-between;设置容器
给每个card留一个边距

这是一个简单的例子：

.container{
  width: 80%;
  border: 1px solid black;
  padding: 10px;
  display: flex;
  justify-content: space-between;
}

.card{
  background-color: #bada55;
  flex-grow:1;
  margin: 10px;
  height: 50px;
}

<div class="container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
</div>

【讨论】：

如果卡片里面有很多文字，就会溢出。