css - React + SCSS：无法使用 flexbox display-flex

Question

注意：我将 boostrap css 用于其他一些组件。

ISSUE => 我希望text-areaandimage并排：

html：

<div class="card">

      <div class="card__text">
        <div>
          <h3 class="card__text-title">Leed guitarist</h3>
          <p>Some random lorem ipsum text to see how this thing looks here. 
             It will have around 300 characters...</p>
        </div>
        <div class="card__text-buttons">
          <a hef="#">Like</a>
          <a hef="#">Know more</a>
        </div>
      </div>

      <div class="card__img">
      </div>

    </div>

scss：

.card {
  overflow: hidden;
  margin: 5px 5px;
  max-width: 400px;
  min-height: 200px;
  display: flex !important;   // <<=== WON'T WORK !!
  box-shadow: 3px 3px 11px 0px rgba(0,0,0,0.75);

  &__img {
    flex: .4;
    min-height: 200px;
     // css properties   
  }

  &__text {
    flex: .6;
    // css properties 
    flex-direction: column;
    justify-content: space-between;
    &-title {
      font-weight: 800;
    }
    &-buttons {
      display: flex;
      a {
        // css properties 
      }
    }
    h3 {
      margin-top: 20px;
    }
    p {
      margin-top: 30px;
      font-size: 13px ;
    }
  }
}

当前结果

我不确定我是否做错了什么。我很沮丧，因为我似乎无法弄清楚。

很确定我在这里遗漏了一些非常小的东西。提前致谢！

标签： cssreactjstwitter-bootstrapsassflexbox

Answer 1

我能够在这里复制您的问题https://codepen.io/dpogni/pen/bGedwbZ

您需要添加flex-direction: row;到您的卡类。