Flexbox Practice Tasks

1. Flex-Grow Practice

1.1 Basic Growth Test

Item 1
Item 2
Item 3

1.2 Only One Grows

Item 1
Item 2
Item 3

1.3 All Items Grow Equally

Item 1
Item 2
Item 3

2. Flex-Shrink Practice

2.1 Basic Shrink Test

Shrink 1
Shrink 2
No Shrink

2.2 Disable Shrinking

No Shrink
Shrink 1
Shrink 1

2.3 Equal Shrinking

Shrink 1
Shrink 1
Shrink 1

3. Flex-Basis Practice

3.1 Different Basis Sizes

100px
200px
300px

3.2 Flex-Basis vs Width

Flex-Basis 300px overrides Width 200px

3.3 Auto vs Zero Basis

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quod, cupiditate provident. Optio amet dolores praesentium facere, atque voluptates fugit, ullam cupiditate ducimus itaque necessitatibus porro ratione fuga sunt fugiat quo.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt ipsam ea nobis reprehenderit deleniti illum molestias atque vel dolor ipsa!