I have a card that has a div inside it that contains 3 elements (2 headers and a paragraph). I want there to be even spacing between each of the elements and the top and bottom of the card. There is a big margin after the last element (bottom of the card). How can I achieve even vertical spacing?
Here is my code
.homeResourcesContainer{
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.homeResource{
padding: 30px;
margin: 100px;
width: 500px;
height: 450px;
border-radius: 18px;
background: #800400;
box-shadow: 5px 5px 15px rgba(0,0,0,0.9);
}
.homeResourceContent{
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
color: white;
font-family: "Source Sans Pro", sans-serif;
}<div class="homeResourcesContainer">
<div class="homeResource">
<div class="homeResourceContent">
<h1 class="homeResourceHeader">Courses</h1>
<p class="homeResourceDescription">Nehemiah University offers a variety of different courses so you have the skills to get to where you want to be.
Whether it be learning how to operate a forklift, apply for a loan, or even learning about science and math,
Nehemiah University will give you the tools to take your personal and proffesional life to the next level.
Sign up for a class and find out what it's all about!</p>
<h2>Click this card to go to the Courses tab!</h2>
</div>
</div>
<div class="homeResource">
<div class="homeResourceContent">
<h1>Training Material</h1>
<p>We want our Nehemiah Family Members to be as succesful as possible in their role. Through proper training and growth initiatives,
we strive to ensure each of our Family Members is achieving their full potential. Use these training materials to learn on the job
skills such as how to labeler machine, filling out time cards, requesting time off, and many more skills to help you on your Nehemiah Journey!</p>
<h2>Click this card to go to the Training Materials tab!</h2>
</div>
</div>
<div class="homeResource">
<div class="homeResourceContent">
<h1>Resources</h1>
<p>Need access to resources for personal development? Nehemiah's social service team offers a variety of different resources and connections
to help you with whatever personal or professional issues you may be experiencing. We want all of our Family Members to have access to professional resources
that help them grow as individuals. Click the Resources tab to check out our pillars of personal development and the resources we offer!
</p>
<h2>Click this card to go to the Resources tab!</h2>
</div>
</div>
</div>CodePudding user response：
Use:
align-items: stretch;
Hat tip to this post for the tip: How to get flexbox columns to be the same height?
.homeResourcesContainer{
display: flex;
align-items: stretch;
justify-content: center;
margin-bottom: 20px;
}
.homeResource{
display: flex;
flex-direction: column;
padding: 1em;
margin: 1em;
border-radius: 18px;
background: #800400;
box-shadow: 5px 5px 15px rgba(0,0,0,0.9);
}
.homeResourceContent{
height: 100%;
align-items: center;
justify-content: space-evenly;
color: white;
font-family: "Source Sans Pro", sans-serif;
}<div class="homeResourcesContainer">
<div class="homeResource">
<div class="homeResourceContent">
<h1 class="homeResourceHeader">Courses</h1>
<p class="homeResourceDescription">Nehemiah University offers a variety of different courses so you have the skills to get to where you want to be.
Whether it be learning how to operate a forklift, apply for a loan, or even learning about science and math,
Nehemiah University will give you the tools to take your personal and proffesional life to the next level.
Sign up for a class and find out what it's all about!</p>
<h2>Click this card to go to the Courses tab!</h2>
</div>
</div>
<div class="homeResource">
<div class="homeResourceContent">
<h1>Training Material</h1>
<p>We want our Nehemiah Family Members to be as succesful as possible in their role. Through proper training and growth initiatives,
we strive to ensure each of our Family Members is achieving their full potential. Use these training materials to learn on the job
skills such as how to labeler machine, filling out time cards, requesting time off, and many more skills to help you on your Nehemiah Journey!</p>
<h2>Click this card to go to the Training Materials tab!</h2>
</div>
</div>
<div class="homeResource">
<div class="homeResourceContent">
<h1>Resources</h1>
<p>Need access to resources for personal development? Nehemiah's social service team offers a variety of different resources and connections
to help you with whatever personal or professional issues you may be experiencing. We want all of our Family Members to have access to professional resources
that help them grow as individuals. Click the Resources tab to check out our pillars of personal development and the resources we offer!
</p>
<h2>Click this card to go to the Resources tab!</h2>
</div>
</div>
</div>CodePudding user response：
I think this is what you trying to achieve.
.homeResourcesContainer{
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.homeResource{
padding: 30px;
margin: 100px;
border-radius: 18px;
background: #800400;
box-shadow: 5px 5px 15px rgba(0,0,0,0.9);
}
.homeResourceContent{
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
width: 200px;
color: black;
font-family: "Source Sans Pro", sans-serif;
}<div class="homeResourcesContainer">
<div class="homeResource">
<div class="homeResourceContent">
<h1 class="homeResourceHeader">Courses</h1>
<p class="homeResourceDescription">Nehemiah University offers a variety of different courses so you have the skills to get to where you want to be.
Whether it be learning how to operate a forklift, apply for a loan, or even learning about science and math,
Nehemiah University will give you the tools to take your personal and proffesional life to the next level.
Sign up for a class and find out what it's all about!</p>
<h2>Click this card to go to the Courses tab!</h2>
</div>
</div>
<div class="homeResource">
<div class="homeResourceContent">
<h1>Training Material</h1>
<p>We want our Nehemiah Family Members to be as succesful as possible in their role. Through proper training and growth initiatives,
we strive to ensure each of our Family Members is achieving their full potential. Use these training materials to learn on the job
skills such as how to labeler machine, filling out time cards, requesting time off, and many more skills to help you on your Nehemiah Journey!</p>
<h2>Click this card to go to the Training Materials tab!</h2>
</div>
</div>
<div class="homeResource">
<div class="homeResourceContent">
<h1>Resources</h1>
<p>Need access to resources for personal development? Nehemiah's social service team offers a variety of different resources and connections
to help you with whatever personal or professional issues you may be experiencing. We want all of our Family Members to have access to professional resources
that help them grow as individuals. Click the Resources tab to check out our pillars of personal development and the resources we offer!
</p>
<h2>Click this card to go to the Resources tab!</h2>
</div>
</div>CodePudding user response：
.homeResourcesContainer{
display: flex;
/*align-items: center;
justify-content: center;*/
margin-bottom: 20px;
}
.homeResource{
padding: 30px;
/*margin: 100px; */
margin: 50px;
width: 500px;
/*height: 450px;*/
border-radius: 18px;
background: #800400;
box-shadow: 5px 5px 15px rgba(0,0,0,0.9);
}
.homeResourceContent{
/*display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;*/
color: white;
font-family: "Source Sans Pro", sans-serif;
}
.homeResourceContent h2 {
margin: 0;
}<div class="homeResourcesContainer">
<div class="homeResource">
<div class="homeResourceContent">
<h1 class="homeResourceHeader">Courses</h1>
<p class="homeResourceDescription">Nehemiah University offers a variety of different courses so you have the skills to get to where you want to be.
Whether it be learning how to operate a forklift, apply for a loan, or even learning about science and math,
Nehemiah University will give you the tools to take your personal and proffesional life to the next level.
Sign up for a class and find out what it's all about!</p>
<h2>Click this card to go to the Courses tab!</h2>
</div>
</div>
<div class="homeResource">
<div class="homeResourceContent">
<h1>Training Material</h1>
<p>We want our Nehemiah Family Members to be as succesful as possible in their role. Through proper training and growth initiatives,
we strive to ensure each of our Family Members is achieving their full potential. Use these training materials to learn on the job
skills such as how to labeler machine, filling out time cards, requesting time off, and many more skills to help you on your Nehemiah Journey!</p>
<h2>Click this card to go to the Training Materials tab!</h2>
</div>
</div>
<div class="homeResource">
<div class="homeResourceContent">
<h1>Resources</h1>
<p>Need access to resources for personal development? Nehemiah's social service team offers a variety of different resources and connections
to help you with whatever personal or professional issues you may be experiencing. We want all of our Family Members to have access to professional resources
that help them grow as individuals. Click the Resources tab to check out our pillars of personal development and the resources we offer!
</p>
<h2>Click this card to go to the Resources tab!</h2>
</div>
</div>
</div>