Align bottom Flex Question

HTML & CSS
1

Hi there,

I am having some trouble trying to align an element to the bottom of a div.

This is the HTML I have:

<div class="vc_col-md-6 sharing pad-x-0">
			<div class="share-the-luck">Share</div>
			<div class="share">
			<div data-network="facebook" class="st-custom-button st-btn-facebook" data-url="<?php the_job_permalink(); ?>" data-title="<?php wpjm_the_job_title(); ?>"><i class="fa fa-facebook-f"></i> Share</div>
			
			<div data-network="twitter" class="st-custom-button st-btn-twitter" data-url="<?php the_job_permalink(); ?>" data-title="<?php wpjm_the_job_title(); ?>"><i class="fa fa-twitter"></i> Tweet</div>
			</div>

		</div>
		
		<div class="vc_col-md-6 enter-competition text-right pad-x-0">
			<a href="<?php the_job_permalink(); ?>" class="btn-pink">Enter</a>
		</div>

The CSS I have is:

.listing-box .sharing{
	display: flex;
	 align-self: flex-end;
}

.listing-box .enter-competition{
	 align-self: flex-end;
	display: flex;
}
.listing-box .share{
	display: flex;
	flex-direction: row
}

.listing-box .share-the-luck{
	padding-bottom: 5px;
	font-size: 12px;
}

.share i{color: #fff}
.listing-box .share .st-btn-facebook{
background: #3B5998;
color: #fff;
font-size: 16px;
text-align: center;
padding: 10px 15px;
cursor: pointer;
margin-right: 15px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;}

.listing-box .share .st-btn-twitter{
background: #55acee;
color: #fff;
font-size: 16px;
text-align: center;
padding: 10px 15px;
cursor: pointer;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;}

I am trying to align the button:
<a href="<?php the_job_permalink(); ?>" class="btn-pink">Enter</a>

to the bottom, or even better align everything to the bottom.

At the moment, the text “Share” is appearing left of the Facebook Share button.

Any ideas what I have wrong?

Hope that make sense.

2

You don’t have a bottom as such because you just have content controlling the height. The last item will be on the bottom by default which it seems to be. The other three items are in a row because that’s how you placed them.

align-self works for flex-items not the containers so has no meaning in your content and as there is no height to this box it doesn’t mean much anyway.

I think you need to put up a working demo/codepen as there are obviously some framework styles and other rules involved here as your snippet doesn’t show what you want.

To align something at the bottom there needs to be a bottom which is either a specific height set of other elements that are taller than some others. Your code doesn’t exhibit any of those properties so its hard to see what you want. Or maybe a drawing/description of what you want and we can show you separate code to produce that effect.

1 Like
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.