Flexbox Layout - equal heights and fittext

Question

I am trying to build a basic user interface using flexbox, I have this so far..

  body,html { margin:0; padding:0; height:100%; } .container { height:100%; display:flex; flex-direction:column; } .top { flex:4; display:flex; background:wheat; align-items: center; justify-content: center; } .bottom { flex:1; background:teal; } .bottom_content { display:flex; flex-direction:column; } .section1 { flex:1; font-size:20px; text-align:center; } .section2 { flex:1; } .btn { background:red; color:white; padding:20px; } 

 <div class="container"> <div class="top"> <span>TOP CONTENT</span> </div> <div class="bottom"> <div class="bottom_content"> <div class="section1"> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacus quam, blandit non lacus in, venenatis tempor dolor. Aliquam in lectus lacus. </span> </div> <div class="section2"> <div class="btn"> THIS IS A BUTTON </div> </div> </div> </div> </div> 

I am trying to achieve this...

How can I make the bottom section with equal height and make the content within it vertically and horizontally centered?

I am also planning on using fittext.js or similar to make the button and the text above fit into the flex item.

Where am I going wrong?

Answer 1

The problem

The issue with your current code is that .bottom is not filling the available space and that the default alignment and justification is being used.

The fix

The desired output can be achieved by doing the following:

• Remove flex:1; from .section1 and .section2 . This stops these div s from expanding to fill the available space
• Add align-items: center; and justify-content: space-evenly; to .bottom_content . This will center align and evenly space out the .section1 and .section2 div s
• Add display: flex; to .bottom . This will make .bottom expand to fit the available space
• Change flex: 1; to flex: 1 0 auto; on .bottom . This will stop .bottom from reducing in size when the height of the window is small

 body, html { margin: 0; padding: 0; height: 100%; } .container { height: 100%; display: flex; flex-direction: column; } .top { flex: 4; display: flex; background: wheat; align-items: center; justify-content: center; } .bottom { /*Change*/ flex: 1 0 auto; background: teal; /*Add*/ display: flex; } .bottom_content { display: flex; flex-direction: column; /*Add*/ align-items: center; justify-content: space-evenly; } .section1 { /*Remove*/ /*flex:1;*/ font-size: 20px; text-align: center; } .section2 { /*Remove*/ /*flex:1;*/ } .btn { background: red; color: white; padding: 20px; } 

 <div class="container"> <div class="top"> <span>TOP CONTENT</span> </div> <div class="bottom"> <div class="bottom_content"> <div class="section1"> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacus quam, blandit non lacus in, venenatis tempor dolor. Aliquam in lectus lacus. </span> </div> <div class="section2"> <div class="btn"> THIS IS A BUTTON </div> </div> </div> </div> </div> 

Answer 2

I have commented some of your code. Please Check

 body, html { margin: 0; padding: 0; height: 100%; } .container { height: 100%; display: flex; flex-direction: column; } .top { flex: 4; display: flex; background: wheat; align-items: center; justify-content: center; } .bottom { flex: 1; background: teal; } .bottom_content { display: flex; flex-direction: column; } .section1 { <!-- flex: 1; -->font-size: 20px; text-align: center; } .section2 { flex: 1; } .btn { background: red; color: white; padding: 20px; margin-top: 25px; } 

 <div class="container"> <div class="top"> <span>TOP CONTENT</span> </div> <div class="bottom"> <div class="bottom_content"> <div class="section1"> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacus quam, blandit non lacus in, venenatis tempor dolor. Aliquam in lectus lacus. </div> <button class="btn"> THIS IS A BUTTON </button> </div> <!-- <div class="section2"> --> <!-- <div class="btn"> --> <!-- THIS IS A BUTTON --> <!-- </div> --> <!-- </div> --> </div> </div> </div> 

Answer 3

justify-content:center and display:flex is the key.

you can adjust margin as you wish,besides it should do the trick.

.bottom_content {
   display: flex;
   flex-direction: column;
   margin-top: 20px;
}

.section2 {
   flex: 1;
   display: flex;
   justify-content: center;
}

.btn {
   background: red;
   color: white;
   padding: 20px;
   width: fit-content;
   position: absolute;
   margin-top: 10px;
}