html - 如何使用 flexbox 使卡片响应？

Question

我有包含 botstrap 4 card div 和 pararagraph 的部分，我想响应，

这是 HTML:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="marketing-main-page-content_details">
<div class="marketing-main-page-content_details-card">

<div class="marketing-main-page-content_card card " data-related="details2" id="card2">
         <p>Która jest własciawa osoba</p>
      </div>
      </div>

<div class="marketing-main-page-content_description-right" id="details1">
      <div class="title-right">
         <p>Która 1 jest własciawa osoba</p>
      </div>
      <p>To ten kurs jest dla Ciebie, specjalnie dla Ciebie.
         Potem dalsza część tekstu, która ma przekonać do
         zakupu. Przekonany? No to klikamy poniżej i
         lecimy do formularza zamówienia!
      </p>
      <div class="marketing-main-page-content_description-right_button">
         <button type="button" class="marketing-main-page-content_description-right_button-primary">Dowiedz
         się wiecej</button>
      </div>
   </div>

   </div>

这是CSS

.marketing-main-page-content_details {
    display: flex;
    justify-content: space-around;
}
.marketing-main-page-content_card {
    font-size: 25px;
    font-family: Roboto;
    font-weight: normal;
    color: #707070;
}

.marketing-main-page-content_card {
    width: 536px;
    height: 137px;
    font-family: Roboto;
    margin-top: 20px;
    font-size: 25px;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    -webkit-box-shadow: 0 3px 13px #5C5C5C;
    box-shadow: 0 3px 13px #5C5C5C;
}

.marketing-main-page-content_description-right {
    width: 47%;
    margin-top: 78px;
}

.title-right {
    font-size: 35px;
    font-family: Roboto;
    font-weight: 500;
    color: #707070;
}

.marketing-main-page-content_description-right p {
    font-size: 25px;
    font-family: Roboto;
    margin-top: 28px;
    color: #707070;
    font-weight: normal;
}



.marketing-main-page-content_description-right p {
    font-size: 25px;
    font-family: Roboto;
    margin-top: 28px;
    color: #707070;
    font-weight: normal;
}
.marketing-main-page-content_description-right {
    width: 47%;
    margin-top: 78px;
}

这是 jsfiddle:https://jsfiddle.net/Mwanitete/a5e4d7u3/25/

我希望它能够响应，但现在正如您在 jsfidle 中看到的那样，它没有响应，

我需要在我的代码中更改什么才能使其具有响应性？

Answer 1

我建议阅读 "A Complete Guide to Flexbox"了解 Flexbox 的工作原理。 display: flex;规则始终适用于您要对齐的元素的容器。我添加了一个 min-width到您的卡片容器，使其与正确的容器具有相同的宽度。

我还删除了固定的 width 规则和 CSS 中的大量冗余代码。始终确保您的标记有效。这应该是一个响应式工作示例:

.marketing-main-page-content_details {
  display: flex;
  justify-content: space-around;
  flex-flow: row nowrap;
}

.marketing-main-page-content_details-card {
  min-width: 50%;
}

.marketing-main-page-content_card {
  font-size: 25px;
  font-family: Roboto;
  font-weight: normal;
  color: #707070;
  height: 137px;
  font-family: Roboto;
  margin: 20px;
  text-align: center;
  -webkit-box-shadow: 0 3px 13px #5C5C5C;
  box-shadow: 0 3px 13px #5C5C5C;
}

.title-right {
  font-size: 35px;
  font-family: Roboto;
  font-weight: 500;
  color: #707070;
}

.marketing-main-page-content_description-right p {
  font-size: 25px;
  font-family: Roboto;
  margin-top: 28px;
  color: #707070;
  font-weight: normal;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="marketing-main-page-content_details">
  <div class="marketing-main-page-content_details-card">

    <div class="marketing-main-page-content_card card " data-related="details2" id="card2">
      <p>Która jest własciawa osoba</p>
    </div>
  </div>

  <div class="marketing-main-page-content_description-right" id="details1">
    <div class="title-right">
      <p>Która 1 jest własciawa osoba</p>
    </div>
    <p>To ten kurs jest dla Ciebie, specjalnie dla Ciebie. Potem dalsza część tekstu, która ma przekonać do zakupu. Przekonany? No to klikamy poniżej i lecimy do formularza zamówienia!
    </p>
    <div class="marketing-main-page-content_description-right_button">
      <button type="button" class="marketing-main-page-content_description-right_button-primary">Dowiedz
         się wiecej</button>
    </div>
  </div>

</div>