CODEWITHSUNDEEP
htmlcssflexbox
Anna Gibson
Anna Gibson

Reputation: 107

Using flexbox to Align content at the bottom of container horizontally

I'm trying to get my .bottom div to align horizontally at the bottom of the card. So I want 80k on top of 'followers', 803k on top of Likes, etc. BUT I want those groupings to be next to each other. Here's the code I have so far:

.container {
  display: flex;
  flex-direction: column;
  text-align: center;
  postion: relative;
  width: 50%;
  height: 400px;
  border: 1px solid black;
  border-radius: 10%;
}

.card-top {
position: relative;
background-image: url(bg-pattern-card.svg);
background-size: cover;
width: 100%;
height:30%;
border: black solid 1px;
align-items: center;
}

.victor {
margin-top: 50px;
border-radius: 50%;
}

.center{
margin-top: 35px;

}

.bottom {
  display: flex;
  flex-direction: row;
  position: relative;
  bottom: 0;
  justify-content: space-between;
  border: 1px solid black;
}
    <div class="container">
    <div class="card-top">
 <p>
  <img class="victor" src="image-victor.jpg" alt="the homie">
</p>
</div>
<div class="center">
<p>
  <span>
  <b>Victor Crest</b>
  26
</span>
<p>
  London
</p>
</p>
</div>

<div class="bottom">
  <span>
  <p>
  80K<br>
  Followers
</p>
<p>
  803K<br>
  Likes
</p>
<p>
  1.4K<br>
  Photos
</p>
</span>
  </div>
    </div>

The end card should look something like the picture below:

enter image description here

Upvotes: 1

Views: 761

Answers (3)

Tanner Dolby
Tanner Dolby

Reputation: 4421

You could utilize CSS Flexbox and make .bottom a flex container to position the items in a row. Next, use justify-content to define how the flex items should be distributed along the main axis (x-direction in a row format). One option is to use justify-content: space-evenly while defining an explicit width for the parent container.

You were on the right track by making the parent div .container a flexbox in column format, the last thing it needed was to specify justify-content: space-between to define the amount of space that should be distributed between and around the flex items.

Using space-between will take all the spare space after the items have been laid out, and share it out evenly between the items so there will be an equal amount of space between each item.

Essentially, justify-content in a flexbox column layout refers to the main axis (y-direction) and how items should be aligned along this axis.

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  position: relative;
  max-width: 300px;
  min-height: 400px;
  border: 2px solid black;
  border-radius: 10%;
}

.card-top {
  position: relative;
  background-image: url(bg-pattern-card.svg);
  background-size: cover;
  width: 100%;
  height: 30%;
  border-bottom: black solid 2px;
  align-items: center;
}

.victor {
  /*margin-top: 50px;*/
  border-radius: 50%;
}

.center {
  margin-top: 35px;
}

.bottom {
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  bottom: 0;
  border-top: 2px solid black;
}

.bottom p {
  color: #000;
  font-weight: 700;
}

.bottom p>span {
  color: #222;
  font-size: .8rem;
}
<div class="container">
  <div class="card-top">
    <p>
      <img class="victor" src="image-victor.jpg" alt="the homie">
    </p>
  </div>
  
  <div class="center">
    <p>
      <span>
          <b>Victor Crest</b>
          26
        </span>
    </p>
    
    <p>
      London
    </p>
  </div>

  <div class="bottom">
    <p>
      80K<br>
      <span>Followers</span>
    </p>
    
    <p>
      803K<br>
      <span>Likes</span>
    </p>
    
    <p>
      1.4K<br>
      <span>Photos</span>
    </p>
  </div>
</div>

Upvotes: 1

coreyward
coreyward

Reputation: 80090

There are myriad ways to accomplish this type of thing. Here's an approach that uses display: flex on the card container with the flex-direction set to column, which means our justify axis is now vertical. With this set, justify-content: space-between means the first item will always be at the top, the last item will always be at the bottom, and any content will take up the room between them (centered):

.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 300px;
  min-height: 300px;
  border: 2px solid black;
  border-radius: 1em;
  overflow: hidden;
}

.card > p {
  padding: 0 1em;
}

.card-header {
  background: #eee;
  padding: 1em;
  text-align: center;
  border-bottom: 2px solid black;
}

.stats {
  display: flex;
  justify-content: space-evenly;
  text-align: center;
  border-top: 2px solid black;
  padding: 1em;
}

.stat {
  font-weight: 700;
  font-size: larger;
  margin-bottom: 0.25em;
}
<div class="card">
  <div class="card-header">Hello, world.</div>

  <p>Some other content here.</p>

  <div class="stats">
    <div>
      <div class="stat">80K</div>
      Followers
    </div>
    <div>
      <div class="stat">803K</div>
      Likes
    </div>
    <div>
      <div class="stat">1.4K</div>
      Photos
    </div>
  </div>
</div>

Upvotes: 1

Filo.
Filo.

Reputation: 108

The easiest think you can do is to use an external container with display:flex to display the 3 internal container.

Each internal container display the number above the string.

CSS

        .bottom {
            display: flex;
            position: relative;
            bottom: 0;
            justify-content: space-around;
            border: 1px solid black;
        }

HTML

        <div class="bottom">
                <div class="internal">
                    <b>80K</b>
                    <p>Followers</p>
                </div>
                <div class="internal">
                    <b>803K</b>
                    <p>Likes</p>
                </div>
                <div class="internal">
                    <b>1.4K</b>
                    <p>Photos</p>
                </div>
            </span>
        </div>

Upvotes: 0

Related Questions