Flexbox Blog

What is Flexbox?

Flexbox (short for flexible box) is a CSS layout model that is displayed as a block element divided into sections. This is known as a flex container.

How do I use Flexbox?

There are a few properties to understand before you can start using flexbox:

• flex-direction- used to align the boxes in the vertical or horizontal direction.

• Flex-wrap- allows the box to automatically wrap around to the other side until all of the boxes fit on the window.

• flex-flow- combines both elements of flex-direction and flex-wrap. This command increases the efficiency while coding.

• Justify-content- works as a float command within the container. It allows for the content to align to the start, end, or center.

• Align items- aligns the content in the boxes vertically towards the desired position. There are align start, end, and center options, just like the "justify-content" option.

  • There are various different types of aligning the content of the container: space-between, space-around, stretch, center, flex-start, and flex-end

So now that you understand the main properties of using flexbox, creating the code should be a very easy and simple process.

1. Create a div tag that contains a class. The name of the class doesn't matter, but for this example I will use a class name of flex-container.
2. Create another div tag under the parent tag that includes some sort of content in them.
3. Now that we are done making the container in the HTML file, we need to add some styling to the container. The most important thing to do first is to create a CSS command to display the content to flex.
4. Nice! Now you have a flexbox! It should look something like this:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

.flex-container {
  display: flex;
}

Now that I created my Flexbox, how can I design it?

Now this flexbox container that we made looks really dull. Let's design it a little bit.

1. Set the flex-direction to either row or column and add a background-color to make the container color contrast from the rest of the page.
2. The container has been designed, but now let's design the content within the container. Create a CSS command of class-name > div (replace class-name with the name that you chose for the flexbox container).
3. Finish designing the content with another background-color, text-align, width, margin, line-height, and font-size.

Now, you should have a nicely designed flex container.

.flex-container {
  display: flex;
  flex-direction: row;
  background-color: black;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

Flexbox Examples:

My groupmate and I have spent the past 2 weeks working on a project that involves the use of flexbox combined with other properties that we learned so far in the school year. This is what we came up with.

Made on Figma:

Made on Replit:

(https://repl.it/@RobertoCallejas/AnimatedLinenDeskscan#style.css)

Our idea was to promote video games on a website while incorporating flexbox and other elements, such as a navbar, into our project to create a nicely organized website.

We made our flexbox using the commands explained on this post as well as additional commands to make the container look extra fancy.

#flex-container-hero {
  display: flex;
  background-color: #333;
  flex-wrap: wrap;
  justify-content: space-around;
  flex-direction: row;
}

#flex-container-hero > div {
  margin-bottom: 10px;
  margin-top: 10px;
  padding: 10px;
  font-size: 25px;
  text-align: center;
  line-height: 75px;
  background-color: grey;
  height: 170px;
  width: 170px; 
  margin: 100px;
}

Instead of putting text inside the flexbox, we put an image inside of the flexbox to make it look more interesting. This is how it looks in the HTML file:

<div id="flex-container-hero">
      <div class"item1"><img src="pc.jpg" style="width:100%"></div>
      <div class"item2"><img src="xbox.jpg" style="width:125%"></div>
      <div class"item3"><img src="playstation.jpg" style="width:110%"></div>
    </div>
    <div id="flex-container-hero">
      <div class"item4"><img src="switch.jpg" style="width:110%"></div>
      <div class"item5"><img src="retro games.jpg" style="width:100%"></div>
      <div class"item6"><img src="gaming accessories.jpg" style="width:110%"></div>
    </div>

Obviously the image won't show up unless you link the image somewhere in your project. So I downloaded the images onto my computer and put the file name on my project.

Conclusion:

You may not know it, but flexbox is used in almost (if not every) site that you have visited. This is how big-name companies like Apple and Amazon are able to promote their products. Making it easy to display on a website will draw the customers more because the design looks so appealing. Flexbox is one of the most important concepts that you need to know to make your own website. And now that you know the basics of how to use flexbox, you can get started on your very first website.

Resources:

W3Schools:https://www.w3schools.com/css/css3_flexbox.asp
Our Website: https://repl.it/@RobertoCallejas/AnimatedLinenDeskscan#style.css