Flexbox ToDo App: Simplified nesting & more semantic markup?

I’ve just completed the section on Flexbox in the Web Development track, and ran through the tasks to correct the layout issues in the ToDo App exercise.

Unsure how much I am doing the right thing here, but I felt two things were occurring during the Nesting Flexboxes section, and in this exercise:


Too much usage of div elements in order to achieve the structure required for the flexboxes

I’m not sure if it is ‘advised’ somewhere to be using divs for each element of flexboxes (?), but it doesn’t make for very semantic HTML. It’s hard to read and may have other downsides, too?

So I ‘improved’ the code for this exercise, and have removed the divs around the h3 and p elements which represent the ‘day’ and ‘task’ boxes; instead moving the associated classes where we place the flexbox declarations directly into the h3 and p tags; and making sure that there are 3 p tags for each day.


Too much nesting of flexboxes in order to achieve the required result

Further, I made changes to the css such that each task is no longer a flexbox container; I couldn’t see any need for them to be set as containers? These are the lowest-level elements of the nesting, which we need to control using wrapping and justifying, but we set that at the level above (divs wth the row class).


In simple terms, in the exercise we had this nesting structure (all child containers are also items, but I’m identifying here where we specifically are using container and item class declarations):

|-container (flex container)
||»–week (flex container and flex item)
|||—row (flex container)
||||»–square (flex container and flex item)
||»–reminder (flex container and flex item)

In my revised code, we have this nesting structure (and specific usage of flex css declarations):

|-container (flex container)
||»–week (flex container and flex item)
|||—row (flex container)
|||»—square (flex item)
|»—reminder (flex item)

So with this code, we’re one container down in the main nesting, and another for reminder (this bit is debatable but the intended structure for this section in the code is unclear, so I have removed the container).

You can see my code and what looks to still be the correct result, in this jsfiddle.


In essence, my questions are:

  1. Why, in the exercises and projects, are flexboxes implemented with so many divs (we’re taught IIRC in the HTML course that too many divs isn’t a good structure?).

  2. Why in this exercise did we give the square class display: flex… which turns each and every task box (item) into a container?