=====
CS 328 - CSS Flex Intro Demo Recording - 2025-03-18
=====

=====
IN THIS RECORDING WE WILL
=====
*   intro CSS flexbox layout

=====
CSS display property
=====
*   now, we want to specify that some HTML container
    be handled in a way other than CSS normal flow

*   you can use the display property to specify a different
    approach than CSS normal flow

*   some possible values:

    display: inline;   /* display selected element as an inline element */

    display: block;    /* display selected element as a block element */

    display: flex;     /* display elements within the selected element
                          using flexbox layout */

    display: grid;     /* display elements within the selected element
                          using grid layout */

    (and there are a few others as well...)

=====
intro CSS flexbox layout
=====
*   flexbox: short for flexible box

*   hopes to provide a way to lay put elements in a container
    so they behave more predictably when the container is
    resized or viewed on different screen sizes

*   may be easier to use than the float property for this
    goal (float: see zyBooks Chapter 3, Secton 3.4)

=====
*   flex container: a container HTML element styled with
    display: flex;

    form
    {
        display: flex;
	....
    }

    .desired_container_class
    {
        display: flex;
	....
    }

=====
*   flex item: a child element of a flex container
    that will be positioned and sized according
    to CSS flexbox properties

=====
*   there are a number of flexbox properties:
    *   flex-direction: direction to use to layout the flex items
        THIS PROPERTY NEEDS TO BE IN THE RULE STYLING the FLEX CONTAINER,
	not the flex items!

        *   default value: row
	    *   display flex items in a row, left-to-right

        *   column: display items in column, top-to-bottom

        *   there are others, see zyBooks flexbox section!

=====
    *   gap property - again, IN the flex container's rule! --
        defines the space BETWEEN flex items

        *   gap: .1em;   /* put a .1em gap between flex items */

=====
    *   justify-content property: specifies the justification of
        flex items in the flex container (again, in the flex container's rule!)

        *   justify-content: flex-start; /* default */
	    *   left-justified flex items if flex-direction is row,
	        top-justified flex items it flex-direction is column

        *   flex-end: right- or bottom- justified!
	*   center: centered in the flex container  <-- I use this quite a bit!
	*   space-between: places the flex items with flexible space in between
	*   space-around: places the flex items with flexible space before and after
	    each element
	*   space-evenly: places the flex items with flexible space between and
	    before and after all the elements (but the same size)

=====
    *   flex-wrap property: specifies how (or if!) flex items wrap when the container
        is not wide enough...
	*   flex-wrap: nowrap;  /* default - don't wrap elements to next line! */
	*   wrap: like normal flow for inline elements, BUT does not change the
	    flex elements' width

        *    ...and see zyBooks section for more...

=====
   *    a flex item's width is determined by a combination of *3* CSS properties:
        (NOTE: these are properties for the flex ITEM...)

        *   flex-basis: sets the initial length of a flex item
	    *   default: auto - flex item has the same initial length as its content

                *   can also be a percentage or a length unit

        *   flex-grow: sets a proportion that determines how much of the available
	    flex container space to assign to the flex item
	    *   default is 0, meaning the size is just based on its content

            *   from https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow:
	        "specifies how much of the flex container's positive free space,
		if any, should be assigned to the flex item's main size."

                if all elements have flex-grow of 1, and if I am understanding
		the above and zyBooks Participation 4.1.5 correctly,
		then those elements would all have the same proportion and
		grow to "fill" the flex container...?

        *   flex-shrink: sets a proportion that determine the flex item's minimize
	    size
	    *   default is 1, meaning the item's size should shrink at the same rate
	        as other items with the flex container's width shrinks
	    *   a value of 0 means the item should not change sizes with the flex
	        container's width shrinks