【问题标题】：React + SCSS: Unable to use flexbox display-flexReact + SCSS：无法使用 flexbox display-flex
【发布时间】：2021-01-25 12:39:23
【问题描述】：

注意：我正在为其他一些组件使用 boostrap css。

问题 => 我希望 text-area 和 image 并排：

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 ;
    }
  }
}

当前结果

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

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

【问题讨论】：

标签： css reactjs twitter-bootstrap sass flexbox

【解决方案1】：

我认为您在 scss 中缺少一个右花括号。

编辑：

我在 codepen 上尝试了相同的操作，并且图像已经在文本的右侧呈现。也许其他一些 css 正在覆盖它

【讨论】：

【解决方案2】：

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

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

【讨论】：