在应用 flexbox 时遇到问题

Question

我在 div 上应用 flexbox 时遇到一些问题。

问题来了：

<div class="annual-plan">
        <div class="icon">
          <i class="fas fa-music"></i>
        </div>
        <div class="pricing">
          <h3>Annual Plan</h3>
          <span>.99/year</span>
        </div>
        <a href="#">Change</a>
 </div>

整个代码包含在 div 中，带有一个名为 class 的内容部分

我尝试使用以下 css 来定位它：

.content-section .annual-plan .pricing{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

但还是没有生效，中间看不到space。

我检查了 chrome 的开发工具，它没有被任何其他代码覆盖。

我做错了什么，我该如何解决？

Answer 1

删除 h3 上的默认 padding 并将您的代码嵌套在 container 中，然后对每个应用弹性框，并使用 justify-content: space-between; 到 space 你的元素。

.annual-plan {
    background-color: lightgrey;
    border-radius: 30px;
    width: 400px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 30px;
}

h3 {
  margin-bottom: .5rem;
}

.container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0px;
 }

<head>
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
</head>
<div class="container">
<div class="annual-plan">
        <div class="icon">
          <i class="fas fa-music">Logo</i>
        </div>
        <div class="pricing">
          <h3>Annual Plan</h3>
          <span>.99/year</span>
        </div>
        <a href="#">Change</a>
 </div>
 </div>

Answer 2

正如您所描述的，这里的问题只是您使用了错误的选择器。您已经明确定位了中央 .pricing div，但它读起来就像您希望整个 .annual-plan 呈现为一列...如果是这样，您应该尝试删除 .pricing 来自上面代码中的选择器。

这里就是，有一些额外的颜色等等。

.annual-plan {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  /* extra styles just for fun */
  background: lightgrey;
  border-radius: 12px;
  padding: 1em;
  min-height: 12em;
  max-width: 33.3333%;
}

.annual-plan .pricing {
  text-align: center;
}

/* more styles just for fun */
h3 {
  margin: 0;
}

<div class="annual-plan">
  <div class="icon">
    <i class="fas fa-music"></i>
  </div>
  <div class="pricing">
    <h3>Annual Plan</h3>
    <span>.99/year</span>
  </div>
  <a href="#">Change</a>
</div>

在应用 flexbox 时遇到问题

having issues applying flexbox

html

css

flexbox

google-developer-tools