Day 20: Flexbox Uncovered and a Fun Coding Game Discovery!

Today was all about Flexbox! I dove into some key properties that are crucial for building responsive layouts and had a blast discovering a cool coding game. Here’s a quick rundown of my day:

Getting to Know Flexbox Better

1. Flex Sizing Basics

I spent some time getting familiar with the Flexbox sizing properties:

flex-grow: This defines how much a flex item can grow relative to other items. For example, flex-grow: 2; means this item will take up twice as much space as an item with flex-grow: 1.
flex-shrink: This determines how a flex item shrinks relative to the other items when space is tight. For instance, flex-shrink: 1; ensures the item shrinks proportionally with others.
flex-basis: This sets the initial size of a flex item. So, flex-basis: 100px; gives the item a starting size of 100 pixels.

2. Flex Shorthand Property

I also explored the shorthand for Flexbox properties, which simplifies things:

flex: 2 2 100px;: This shorthand sets flex-grow to 2, flex-shrink to 2, and flex-basis to 100 pixels.
flex: 2 100px;: This sets flex-grow to 2 and flex-basis to 100 pixels, with flex-shrink defaulting to 1.
flex: 2;: This sets flex-grow to 2, with flex-shrink defaulting to 1, and flex-basis set to auto.
flex: 100px;: This specifies flex-basis as 100 pixels, with flex-grow and flex-shrink defaulting to 1.

Practice and Play

I put my new knowledge to the test with a couple of exercises, which really helped cement the concepts and gave me a clearer picture of how everything fits together.

A Fun Discovery: Flexbox Adventure

The highlight of my day was finding an awesome resource: Flexbox Adventure. It’s a game that turns learning Flexbox into a fun and interactive experience. It’s a great way to practice and reinforce what I’ve learned in a more engaging way.

Wrap-Up

Today was a great mix of learning and fun. I got a solid grip on Flexbox sizing and shorthand properties, tackled some hands-on exercises, and discovered a game that makes practicing Flexbox enjoyable. Looking forward to more learning and exploring in the days ahead!

Feel free to share any cool resources or experiences you’ve had. Cheers to more coding adventures!