Help talk:Wiki University Flexbox - Display Horizontal

I will try to explain my thinking, but we might have to talk on the phone.

I tried to arrange your comments in an order that emphasized the simple change and highlighted how simple it really is. So I first showed the coding for the boxes in a column. Then they can see how little code you had to actually add to make the boxes move.

Your step one is really about how you make the boxes originally. i thought it distracted from how simple the flexbox code is to stop there and make the boxes. Let's discuss the code that makes the boxes when we first make the boxes up above. Then in this step we emphasize just the simple change.

Also I put the list of things to notice below the code, so the first thing they immediately see the code change. Then I want them to read the notices because here they are becoming familiar with default positioning just before you start to tell them how you are now going to vary that.

But on the other instructions I wanted to leave the what to notice message where you already had it. Because now you are signalling exactly why this code is different from the original---how it is going to change the boxes even further than the original.

Suggestion:

They are shown on this page as your browser would place them. Notice, by default, they are in a column. Main Page Research Help Wiki Help Get Involved Here is the coding: Main Page Research Help Wiki Help Get Involved

Placing objects in a row - display:flex The first illustration of the capabilities of Flexbox coding is the ease of being able to place these four colored boxes in a row.  We will add the first Flexbox coding to the inline styling of the opening div tag to have the color boxes line in a row:   Main Page Research Help Wiki Help Get Involved '' A red border is in place around the boxes so you can see the relationship between the boxes and their container. ''

Here is the coding:

 Main Page Research Help Wiki Help Get Involved

  NOTICE that the boxes are on the left end of the container  NOTICE that the width of the boxes are controlled by the content in the boxes.  
 * NOTICE that the boxes are now in a row with only two words of code.