DEV Community 👩‍💻👨‍💻

Cover image for What is Flex Box and what is its function?
MarceloVarela22377
MarceloVarela22377

Posted on • Updated on

What is Flex Box and what is its function?

Flexbox, Flexbox, Flexbox

My teammates for this website were Daniel Valle and David Vina. It was a good experience learning and using flexbox, and so this blog is my way of passing on this information to others. Enjoy!!

How do we layout a website using code

Before flexbox was made and became widely used, four other systems were used to program the layouts of websites. These four layout systems were Blocks, Inline, Table, Positioned:

So why do we need flexbox?

Well, flexbox basically allows us(developers) to use all the previous mentioned systems and turn them into one system with multiple elements.
These elements of the flexbox system include:

  • Flex-Direction: which provides the direction of where the containers information will be positioned. Some direction commands include: Column, Column-reverse, row and row-reverse.

  • Flex-Wrap: decides wether the container items should wrap or not. Commands include: wrap; nowrap, and wrap-reverse.

  • Flex-Flow: Combines both flex-direction and flex-wrap into a single command strip or segment.

  • Justify-Content: is used to align the items inside the container in specific ways. Commands Include center; flex start; flex-end; and space-around;

  • Align-Items: aligns flex items. Included Commands are: center; flex-start; flex-end; stretch; and baseline;

  • Align-Content: space-between; space-around; stretch; center; flex-start; and flex-end;

There are also propertied for the items to personalize them even more. The flex item properties are:

A. order
B. flex-grow
C. flex-shrink
D. flex-basis
E. flex
F. align-self

Flexbox replaces the more complicated systems and provides a simple and easier way to auto reposition elements!! Ok!! Now that we'e gotten all the boring definitions out of the way, lets actually use it!!

Ok so how do you start using it?

1st Step:

Lets make a design of what we want our website to look like. (My team and I used www.figma.com for our design) So for our website, my partners and I decided to do a concession stand online store from our school.

This is what our brainstorm of the website looked like:

The Products Page

This is where most of the flexbox was used, designing the layout of the products page and completing the Navbar.

Alt Text

2nd Step:

Next once you are happy with your designs you will go on to start coding the actual website. We used www.repl.it for our website, but you can use any programming site or library you want!!!

#navbar1{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  border: black solid 3px;
  position: sticky;
  top: 0;
  padding: 10px;
  margin:50px;
  background-color: #BDB200;
  border-radius: 10px;
Enter fullscreen mode Exit fullscreen mode
#products-box{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
  text-align: center;
  font-size: 20px;
  top: 0;
  background-color: #BDB200;
  border-radius: 15px;
  border: black solid 3px;
Enter fullscreen mode Exit fullscreen mode

These were two snippets from our code where we used Flexbox and its capabilities.

3rd step:

In this step we get to see the finished product. after hours of time and effort your website is completed.

To look at the website, You can use this link:

https://flexboxwebsite.danielvalle2340.repl.co

To view the code use this link:

https://repl.it/@danielvalle2340/Flexboxwebsite#index.html

Well, now You know how the Flexbox system works and can use it in your future projects like we did. I hope that you enjoyed this little blog and have a great day!!

Resources Used:

www.w3schools.com
www.figma.com
www.repl.it

Top comments (4)

Collapse
 
stokry profile image
Stokry

I built a Mozilla Firefox extension for testing CSS flexbox rules.

This extension is easy to use, you can make grids, columns, experiment with all flexbox properties. Here it is - link

Collapse
 
louislow profile image
Louis Low

That's nice. I can use that for kids to play around and learn Flex.

Collapse
 
louislow profile image
Louis Low

I built a CSS framework (Yogurt) that leverages the power of Flex.

Collapse
 
mshajid profile image
mshajid

flexbox froggy is a game for learning flexbox and theur materials. It's kind of fun game with 24 levels i guess.

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠