What is Flex Box and what is its function?

#css #html #codenewbie #webdev

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.

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;

#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;

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)

Stokry • Oct 23 '20

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