(Day 17 of 100) Flexbox 101

Topics Covered: display:flex;, flex-grow, flex-shrink, align item vs justify-content, Flex

What I learned:

1. Flexbox documentation here is very helpful
2. display: flex; This defines a flex container and all its elements inside the container will want to be ordered in a row (as a default)

3. flex-grow (in order to use this, flex-grow needs to be wrapped around a flex container)

In this case, the red box wants to take up all the free space available in the row because flex-grow is only applied in one element. flex-grow number is a growth rate

In this case, the red blue and green boxes grew to take up all free space available in the row. Note that blue is not twice longer than red. This means that the flex-growth rate is non-linear.

4. Flex-shrink: Flex shrink is reverse of flex grow, only difference is that flex-shrink start to take an effect as the browser gets smaller

5. Flex-wrap: By default, flex container likes stays in one line because its default setting is at Flex-wrap: nowrap; flex-wrap can essentially, make your web app responsive and can replace css media.

As the browser shrinks, the boxes moves to the next row.

6. Align items vs justify-content: Align item aligns the content along the cross axis and justify-content aligns the content along the main axis.

7. Flex: Flex property is combination of grow, shrink, flex-basis altogether. Below example shows how flex concept plays. flex-basis defines the default size of an element before the free space is distributed.

The example also shows how to center the font at the center of the box. It requires setting the box to have display:flex; and content to have margin:auto;

Current technology stack in mind: React+Redux+Flexbox+GraphQL+Python+Django+PostgreSQL

Total time spent on the challenge: 3.5 hours

Actual Time focused on the challenge: 2.5hours

What I did:

1. Did css excercises from freecodecamp.org
2. watched some flexbox tutorial on youtube

Plan for next day:

1. Start making ERP app (front end only)