#100DaysofCode Chapter 2 ~ CSS Flexbox
Tags: css, webdev, 100daysofcode, beginners
Published: 2020-10-12 14:24:22



![flexbox-css.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1602511063694/e5jLo_HWr.png)

> 
The descriptions below are a brief overview of the topic. Go through the **recommended resources** to get in-depth explanations of CSS Flexbox.
 
**Introduction**

Flexbox is short for **Flexible Box** Module. The Flexbox Module was designed as a **one-dimensional** layout model. It makes it easier to design flexible responsive layout structures without using floats or positioning.
 
**What is CSS Flexbox?**

**CSS Flexbox** also known as the flexible box is a type of layout model in CSS that makes it super easy to design responsive layouts. It is a web layout model that helps in designing a flexible layout. It allows items inside a container to be aligned automatically according to the screen size.

The flexbox module is a **one-dimensional** layout that provides an efficient way to align, layout, and distribute space among elements within your document even in a case of dynamic viewpoint or size. Flexbox is a one-dimensional layout refers to the fact that flexbox deals with the layout in one dimension at a time either as a row or column.
 
 

> 
I have completed 20 days in the 100 Days of Code Challenge. Below is a recap of everything I accomplished during this second chapter.

**Projects**

The majority of my coding for this chapter was for two main projects.
 
**Navigation Bar**

![Nav Bar.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1602511164587/og81mrcwU.png)

For this project, I created the navigation links in the navigation bar using an unordered list which I believe is a common practice in creating a navigation bar and also for styling I used the display flex properties which is the first thing to do in using flexbox, then I evenly spaced and centered the links. You can check out this project on  [CodePen](https://codepen.io/lanrewaju/pen/yLJBqVN)  and  [GitHub.](https://github.com/lanre-waju/Navigation-Bar--100DaysofCode) 
 
**Flexbox Pricing Table**

![Pricing Table.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1602511200447/MeeyZqZFj.png)

For this project, I turned on flexbox by using the display flex properties which is again very important in using flexbox, used flexbox nesting, and centered the three pricing tables. As you might expect, you can also find this project on  [CodePen](https://codepen.io/lanrewaju/pen/KKMwgeW)  and  [GitHub.](https://github.com/lanre-waju/Flexbox-Pricing-Table--100DaysofCode) 
 
**Recommended Resources**

·          [freeCodeCamp’s CSS Flexbox](https://www.freecodecamp.org/learn) 

·          [CSS-Tricks – A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) 

·          [MDN’s CSS Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) 

·          [w3schools CSS Flexbox](https://www.w3schools.com/css/css3_flexbox.asp) 

·          [Wes Bos – What The Flexbox?!](https://flexbox.io/) 

·           [Flexbox Froggy](http://flexboxfroggy.com/) 

·          [Flexbox Defense](http://www.flexboxdefense.com/) 

·          [Flexbox Game](https://www.flexboxgame.com/) 

·          [A Visual Guide to CSS3 Flexbox Properties](https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties) 

·          [freeCodeCamp – How Flexbox Works](https://www.freecodecamp.org/news/an-animated-guide-to-flexbox-d280cf6afc35/) 

·          [CSS Reference Concept – Flexbox](https://tympanus.net/codrops/css_reference/flexbox/) 
 
**What’s Next?**

My plans for the next chapter are:

• Working on CSS Grid and building projects on them.

• Continue learning JavaScript.
 
**Conclusion**

I am writing this post to help other beginners like myself understand this topic better. I hope you enjoyed this post and that reading it provided some useful information.

I have only been coding for a few months now, so there is still a lot for me to learn. I would love it if you could give me any feedback on my projects.

Also, if you know any other recommended resources not mentioned on the list and you want to share, please feel free to drop the link in the comment section.

To see my daily progress on the  [#100DaysofCode](https://dev.to/lanrewaju/my-coding-journey-in-2020-100daysofcode-challenge-accepted-2efo)  challenge, follow me on Twitter  [@lanre__waju](https://twitter.com/lanre__waju)