• 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.

Leave a Reply

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