CODEWITHSUNDEEP
cssflexbox
n1234
n1234

Reputation: 175

Flexbox - Content in card to be spaced evenly

This is probably a really simple answer, but it's frustrating me. I have a flex container with 2 items side-by-side; there is an image for one, and content for the other side. In the content, it is centered both horizentally and vertically, but the content is stacked pretty tightly on top of each other (title, text, button). Is there a way to have them evenly spaced around the height of the card?

#container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

#container-image>img {
  display: block;
  width: 100%;
}

#container-image {
  flex: 1;
}

#container-content {
  flex: 2;
  align-self: center;
  text-align: center;
}

.button {
  background-color: blue;
  color: white;
  padding: 6px 30px;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  border: 1px solid #34495e;
}
HTML:

<section id="container">
  <div id="container-image">
    <img src="https://www.placecage.com/c/1500/2000" alt="" />
  </div>

  <div id="container-content">
    <h3>title</h3>
    <p>some text about this card</p>
    <a class="button">more...</a>
  </div>
</section>

Upvotes: 0

Views: 1252

Answers (1)

Temani Afif
Temani Afif

Reputation: 272965

Consider another flexbox container for the text using column direction and then you can easily space them like you want:

#container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

#container-image>img {
  display: block;
  width: 100%;
}

#container-image {
  flex: 1;
}

#container-content {
  flex: 2;
  text-align: center;
  display:inline-flex;
  flex-direction:column;
  justify-content:space-evenly; /*you can also use space-between OR space-around*/
}

.button {
  background-color: blue;
  color: white;
  padding: 6px 30px;
  text-align: center;
  display: inline-block;
  align-self:center;
  font-size: 16px;
  border: 1px solid #34495e;
}
<section id="container">
  <div id="container-image">
    <img src="https://www.placecage.com/c/1500/2000" alt="" />
  </div>

  <div id="container-content">
    <h3>title</h3>
    <p>some text about this card</p>
    <a class="button">more...</a>
  </div>
</section>

Upvotes: 1

Related Questions