having issues applying flexbox-CodePudding

I'm having some issues applying flexbox on a div.

here is the problem :

<div >
        <div >
          <i ></i>
        </div>
        <div >
          <h3>Annual Plan</h3>
          <span>$59.99/year</span>
        </div>
        <a href="#">Change</a>
 </div>

this whole code is wrapped in div with a class named content-section

i tried targeting it with css using the following :

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

but still doesn't take effect, and you can see no space between.

I checked the dev tools of chrome and it's not overridden by any other code.

what did I do wrong and how can I fix it?

CodePudding user response：

Remove the default padding on h3 and nest your code in a container then apply flex-boxes to each, and use justify-content: space-between; to space your elements.

.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 >
<div >
        <div >
          <i >Logo</i>
        </div>
        <div >
          <h3>Annual Plan</h3>
          <span>$59.99/year</span>
        </div>
        <a href="#">Change</a>
 </div>
 </div>

CodePudding user response：

The issue here, as you've described it, is just that you've got the wrong selector. You've explicitly targeted that central .pricing div, but it reads to me like you want the whole .annual-plan to render as a column... If so, you should try just deleting .pricing from the selector in your above code.

Here that is, with some extra colors and all that.

.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 >
  <div >
    <i >