• Home
  • Flex Hell Exercise #2

Flex Hell Exercise #2

Let’s really get down and dirty with flex

We’ll need to recreate the following box/text setup ourselves

Tips & Tricks

  • Break this down into sections!! (tackle each box one at a time, when done collapse)
  • If there is text that isn’t surrounded by a border on every side (like one) it’s going to have elements appear after it, otherwise there should be a whole box for every other text you see
  • To save time add a class .flex { display: flex; } so you can easily add it to each div that has columns

Use this CodePen and click the Fork button to create your own copy!  Scroll down for final working code example:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

See the Pen FlexHell by Angel Grablev (@agrublev) on CodePen.0

Comments (3)

  • Flex Hell#2 was a great exercise. I really had a tough time comprehending the boxes within boxes inception thing when struggling with the Flex Hell# 1 exercise, but I felt like I got this one down in record time with very few mistakes. I guess it just takes time and practice. Thanks for putting this together!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.