FLEXBOX (display:flex;)

justify-content & align-items

When we changed the display value of parent containers to flex or inline-flex, all of the child elements (flex items) moved toward the upper left corner of the parent container.
This is the default behavior of flex containers and their children.
We can specify how flex items spread out from left to right, along the main axis.

To position the items from left to right (horizontally), we use a property called justify-content.

To position the items up/down (vertically), we use a property called align-items OR if there are items over multiple lines then use align-content.

There is also a display:flex-grow; property which specifies how much the item will grow relative to the rest of the flexible items inside the same container.
Visit the link flex-grow for more.

There is also a display:flex-shrink; property which specifies how much the item will shrink relative to the rest of the flexible items inside the same container.
Visit the link flex-shrink for more.

Actually you can also take a look at flex-basis and flex-direction and flex-flow and flex-wrap
or visit the main flex explanation

Using 'justify-content:....' (left-right)

Flex Start

Flex End

Center

Space Around

Space Between

Using 'align-items:....' (up - down)

Flex Start

Flex End

Center

Baseline - boxes align at the bottom edge if boxes are different heights

Example of flex-shrink

Step 1 (flex-shrink:2; on either side)

(either side shrinks twice as fast as center)

1

2

3

Step 2 (flex-shrink:0; on either side)

(either side does not shrink at all)

1

2

3

Step 3 (flex-shrink:2; on center only)

(center shrinks twice as fast as either side)

1

2

3

Some things I learned here

display: flex
changes an element to a block-level container with flex items inside of it.

display: inline-flex
allows multiple flex containers to appear inline with each other.

justify-content
is used to space items along the main axis.

align-items
is used to space items along the cross axis.

flex-grow
is used to specify how much space (and in what proportions) flex items absorb along the main axis.

flex-shrink
is used to specify how much flex items shrink and in what proportions along the main axis.

flex-basis
is used to specify the initial size of an element styled with flex-grow and/or flex-shrink.

flex
is used to specify flex-grow, flex-shrink, and flex-basis in one declaration.

flex-wrap
specifies that elements should shift along the cross axis if the flex container is not large enough.

align-content
is used to space rows along the cross axis.

flex-direction
is used to specify the main and cross axes.

flex-flow
is used to specify flex-wrap and flex-direction in one declaration.

Flex containers can be nested inside of each other by declaring display: flex or display: inline-flex for children of flex containers.

Using display:flex; on my index.html form

See the code in index.html for more

but for a brief explanation:-
In the <style> area at the top of my form I included...

/*Start with both boxes maintain a width of 45%*/
.flexBlock {
   width:45%;
}

/*set this to NOWRAP now - it is the default so it's not necessary but I wanted to show it.
change to wrap (in the @media command) when screen size shrinks. */
.flexContainer {
   flex-wrap: nowrap;
}

@media only screen and (max-width: 900px) {

   /*when screen size drops below 900px make the width 95%*/
   /*So it will now show 1 div box instead of 2 wide...
   (flex-wrap must change to 'wrap' - see.flexContainer below) */
   .flexBlock {
   width: 95%;
   }

   /*When screen size drops below 900px this makes sure the 2 boxes wrap.*/
   .flexContainer {
   flex-wrap: wrap;
   }

}
/*Above here is the code for making the flexbox change it's size and then drop to single boxes*/

Then on the parent (div) container I allocate the class flexContainer
and on the children (div's) I allocate the class flexBlock