Content area

The navigation bar occupies a fixed position on top of the screen. Hence, it will overlap with the page's content. Open up styles.css and add the following code:

body {
  padding-top: 65px;
}

This will add padding to the entire body section so that the navbar will not overlap with our content. Now, we need to convert our primary content area div.body to a flexbox:

.body {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}

This will convert our div.body element into a flexbox that organizes its contents as a row (flex-direction) and wraps the contents to new rows if space is not available for entire rows (flex-wrap). Also, the contents will be surrounded by equal margin spaces horizontally (justify-content).

Guess what? We are done! Our primary layout is already complete! Switch to Chrome, hard-reload, and see that the contents are now aligned horizontally. Open up the responsive design mode; for mobile devices you will see that the row is automatically wrapped into two rows to display the content. Without flexbox, this would have taken thrice the amount of code to achieve the same layout. Flexbox greatly simplifies the layout process.

Now that our primary layout is complete, let's add some styles to individual elements, such as:

• Making .canvas-area twice the size of the .input-area
• Adding a black border to the canvas element
• Center-aligning the canvas and the form inputs in their respective areas
• Also, we need to add a margin to both .canvas-area and .input-area so that there will be space between them when the row is wrapped

To achieve these styles, add the following CSS to your styles.css file:

.canvas-area {
   flex: 2;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 10px;
}
.img-canvas {
   border: 1px solid #000000;
}
.input-area {
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   margin: 10px;
}

The canvas area is still quite small, but we'll handle its size from our JavaScript code. So, now, we don't need to worry about the size of the canvas.

We are almost done with our styles, except that the form inputs are now in different sizes. This happens because Bootstrap's .form-input styles tell the respective div to occupy the entire width of its parent div. However, when we add align-items: center in our style, we are telling the parent div to assign a limited width so that the contents are not overlapped and are then centered inside the flexbox. So, the width of each element now differs based on its contents.

To overcome this problem, we simply need to specify a fixed width to the .form-input class. Also, let's add some extra top margin to the download button. Add the following lines at the end of your styles.css file:

.form-group {
  width: 90%;
}
.download-button {
  margin-top: 10px;
}

Now we are done building the UI for our Meme Creator using flexbox. It's time to move on to the most important topic in this chapter.