Responsive web design principles and CSS Flexbox questions, resources, and discussion (January. 2018 Cohort)

I just finished the flexbox lessons and have these 2 corrections to make:

  1. In the CSS Flexbox: Align Elements Using the justify-content Property lesson, space-between is explained as follows:

aligns items to the center of the main axis, with extra space placed between the items.

I think this is not a correct explanation since the items are aligned to the edges rather than the center in a situation where there is an even number of items. It happens to be in a situation where there is an odd number of items that the middle item will be aligned to the center.

  1. CSS Flexbox: Use the flex Shorthand Property lesson, it states:

Give #box-1 the values so its flex-grow is 2, its flex-shrink is 2, and its flex-basis is 150px. Give #box-2 the values so its flex-grow is 1, its flex-shrink is 1, and its flex-basis is 150px.
These values will cause #box-1 to be twice the size of #box-2 when the container is greater than 300px and half the size of #box-2 when the container is less than 300px.

This is incorrect since #box-1 will only grow and shrink at twice the rate. I found this forum post discussing this mistake.

Also, I cannot figure out the goal of setting display: flex on the h3 & h4 elements in the tweet embed examples.

1 Like