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
androw-reverse
.Flex-Wrap
: decides wether the container items should wrap or not. Commands include:wrap
;nowrap
, andwrap-reverse
.Flex-Flow
: Combines bothflex-direction
andflex-wrap
into a single command strip or segment.Justify-Content
: is used to align the items inside the container in specific ways. Commands Includecenter
;flex start
;flex-end
; andspace-around
;Align-Items
: aligns flex items. Included Commands are:center
;flex-start
;flex-end
;stretch
; andbaseline
;Align-Content
:space-between
;space-around
;stretch
;center
;flex-start
; andflex-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!!
Top comments (4)
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
That's nice. I can use that for kids to play around and learn Flex.
I built a CSS framework (Yogurt) that leverages the power of Flex.
flexbox froggy is a game for learning flexbox and theur materials. It's kind of fun game with 24 levels i guess.