tbennett · April 13, 2020 21:55
diff --git a/flexbox-example b/flexbox-example
 <!DOCTYPE html>
 <html lang="en">

 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Demo</title>
  <style>

    html, body {
      margin:0;
      padding:0;
    }

    h1, h2, h3, h4, h5, h6, label {
      font-family:sans-serif;
    }

    .wrapper {
      max-width:60em;
      position:relative;
      margin:0px auto;
    }

    /* adding flex to a container allows its nested elements
    * to behave like flex children */
    .row {
      display:flex;
      flex-flow: row wrap;
      min-height:2.5em;
    }

    /* essentailly "floats" the nested search form to the right */
    .meta {
      flex-direction:row-reverse;
    }

    .meta .search fieldset {
      border:none;
      color:white;
    }
    
    .meta, footer {
      background:#007722;
    }
    
    .logo {
      background: #229944;
    }
    
    /* allows nav links to wrap when window width shrinks */
    .main-nav {
     flex-wrap:wrap;   
   }

    /* flex-grow is a value that sets the items to
    * each grow to fill the width of the parent
    * each child can have a value that is proportional to its siblings */
    .main-nav > .lnk {
      display:flex;
      flex-grow:1;
      flex-wrap:wrap;
      flex-basis:9em;

      border: 1px solid #888;
      padding:.25em;
      background:#333;
      color:#fff;
      min-height:2.5em;
      font: 500 .85em/1.2 sans-serif;
      text-decoration:none;
    }
    
    /* flex children can be centered BOTH horizontally
    * AND vertically by simply setting margins to auto */
    .lnk span {
      margin:auto;
    }
    
    .hero {
      height: 325px;
      background:#555 url(http://unsplash.it/960/325/) no-repeat;
      background-size:contain;
      margin:0;
    }

    /* this is also a row / flex container */
    .hero .caption {
      height:100%;
      color:white;
      font:300 1em/1 sans-serif;
      text-shadow: 2px 2px 2px rgba(50, 50, 50, 1);
    }

    .hero .caption * {
      padding:0 1em;
      flex-grow:1;
      flex-basis:10em;
      align-self:flex-end;
    }
    
    /* since the parent is a flex parent, the divs default to the 
    * horizontal direction and split the parent width evenly 
    * to fill the entire width of the container. */
    .feature {
      padding-left:10px;
    }

    .feature .feature-pic {
     //width:100%;
     //height:auto;
   }

   /* the media query is used to check the width of the browser window and
    apply new CSS rules to the page based upon the current window size.
    In this case, see if the browser's width is greater than 720px.
 
    The following rules create the desktop layout. */
    @media only screen and (min-width: 720px) {
      
      /* since the parent is a flex parent, the divs default to the 
      * horizontal direction and split the parent width evenly 
      * to fill the entire width of the container. */
      .row {
        flex-flow: row nowrap;
      }

    }

  </style>
 </head>

 <body>
  <main class="wrapper">
    <header class="site-header">
      <div class="row meta">

        <form class="search">
          <fieldset>
            <label for="search">
              <span>search</span>
              <input type="text" name="search">
            </label>
            <input type="submit" value="go">
          </fieldset>
        </form>

      </div>

      <div class="row logo">
        <img src="http://unsplash.it/200/80" alt="Widgco Inc.">
      </div>

      <nav class="row main-nav">
        <a class="lnk" href="#"><span>Diamonds</span></a>
        <a class="lnk" href="#"><span>Engagement Rings</span></a>
        <a class="lnk" href="#"><span>Wedding</span></a>
        <a class="lnk" href="#"><span>Jewelry &amp; Gifts</span></a>
        <a class="lnk" href="#"><span>Designers</span></a>
        <a class="lnk" href="#"><span>Education</span></a>
      </nav>
    </header>

    <figure class="hero">
      <figcaption class="row caption">
        <h1>Hero Image Here</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam eveniet quas dicta at  quis!
        </p>
      </figcaption>
    </figure>

    <section class="row products">

      <article class="feature">
        <h3>Diamond Jewelry</h3>
        <img class="feature-pic" src="http://unsplash.it/300/200" alt="jewels" />
        <ul>
          <li>Build Your Own Earrings</li>
          <li>Build Your Own Diamond Pendant</li>
          <li>Pre-set Diamond Stud Earrings from $250</li>
        </ul>
      </article>

      <article  class="feature">
        <h3>Diamond Jewelry</h3>
        <img class="feature-pic" src="http://unsplash.it/300/200" alt="jewels" />
        <ul>
          <li>Build Your Own Earrings</li>
          <li>Build Your Own Diamond Pendant</li>
          <li>Pre-set Diamond Stud Earrings from $250</li>
        </ul>
      </article>

      <article  class="feature">
        <h3>Diamond Jewelry</h3>
        <img class="feature-pic" src="http://unsplash.it/300/200" alt="jewels" />
        <ul>
          <li>Build Your Own Earrings</li>
          <li>Build Your Own Diamond Pendant</li>
          <li>Pre-set Diamond Stud Earrings from $250</li>
        </ul>
      </article>

    </section>

    <footer class="row">
      footer
    </footer>
  </main>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Flexbox Demo</title>
	<style>

	html, body {
	margin:0;
	padding:0;
	}

	h1, h2, h3, h4, h5, h6, label {
	font-family:sans-serif;
	}

	.wrapper {
	max-width:60em;
	position:relative;
	margin:0px auto;
	}

	/* adding flex to a container allows its nested elements
	* to behave like flex children */
	.row {
	display:flex;
	flex-flow: row wrap;
	min-height:2.5em;
	}

	/* essentailly "floats" the nested search form to the right */
	.meta {
	flex-direction:row-reverse;
	}

	.meta .search fieldset {
	border:none;
	color:white;
	}

	.meta, footer {
	background:#007722;
	}

	.logo {
	background: #229944;
	}

	/* allows nav links to wrap when window width shrinks */
	.main-nav {
	flex-wrap:wrap;
	}

	/* flex-grow is a value that sets the items to
	* each grow to fill the width of the parent
	* each child can have a value that is proportional to its siblings */
	.main-nav > .lnk {
	display:flex;
	flex-grow:1;
	flex-wrap:wrap;
	flex-basis:9em;

	border: 1px solid #888;
	padding:.25em;
	background:#333;
	color:#fff;
	min-height:2.5em;
	font: 500 .85em/1.2 sans-serif;
	text-decoration:none;
	}

	/* flex children can be centered BOTH horizontally
	* AND vertically by simply setting margins to auto */
	.lnk span {
	margin:auto;
	}

	.hero {
	height: 325px;
	background:#555 url(http://unsplash.it/960/325/) no-repeat;
	background-size:contain;
	margin:0;
	}

	/* this is also a row / flex container */
	.hero .caption {
	height:100%;
	color:white;
	font:300 1em/1 sans-serif;
	text-shadow: 2px 2px 2px rgba(50, 50, 50, 1);
	}

	.hero .caption * {
	padding:0 1em;
	flex-grow:1;
	flex-basis:10em;
	align-self:flex-end;
	}

	/* since the parent is a flex parent, the divs default to the
	* horizontal direction and split the parent width evenly
	* to fill the entire width of the container. */
	.feature {
	padding-left:10px;
	}

	.feature .feature-pic {
	//width:100%;
	//height:auto;
	}

	/* the media query is used to check the width of the browser window and
	apply new CSS rules to the page based upon the current window size.
	In this case, see if the browser's width is greater than 720px.

	The following rules create the desktop layout. */
	@media only screen and (min-width: 720px) {

	/* since the parent is a flex parent, the divs default to the
	* horizontal direction and split the parent width evenly
	* to fill the entire width of the container. */
	.row {
	flex-flow: row nowrap;
	}

	}

	</style>
	</head>

	<body>
	<main class="wrapper">
	<header class="site-header">
	<div class="row meta">

	<form class="search">
	<fieldset>
	<label for="search">
	<span>search</span>
	<input type="text" name="search">
	</label>
	<input type="submit" value="go">
	</fieldset>
	</form>

	</div>

	<div class="row logo">
	<img src="http://unsplash.it/200/80" alt="Widgco Inc.">
	</div>

	<nav class="row main-nav">
	<a class="lnk" href="#"><span>Diamonds</span></a>
	<a class="lnk" href="#"><span>Engagement Rings</span></a>
	<a class="lnk" href="#"><span>Wedding</span></a>
	<a class="lnk" href="#"><span>Jewelry & Gifts</span></a>
	<a class="lnk" href="#"><span>Designers</span></a>
	<a class="lnk" href="#"><span>Education</span></a>
	</nav>
	</header>

	<figure class="hero">
	<figcaption class="row caption">
	<h1>Hero Image Here</h1>
	<p>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam eveniet quas dicta at quis!
	</p>
	</figcaption>
	</figure>

	<section class="row products">

	<article class="feature">
	<h3>Diamond Jewelry</h3>
	<img class="feature-pic" src="http://unsplash.it/300/200" alt="jewels" />
	<ul>
	<li>Build Your Own Earrings</li>
	<li>Build Your Own Diamond Pendant</li>
	<li>Pre-set Diamond Stud Earrings from $250</li>
	</ul>
	</article>

	<article class="feature">
	<h3>Diamond Jewelry</h3>
	<img class="feature-pic" src="http://unsplash.it/300/200" alt="jewels" />
	<ul>
	<li>Build Your Own Earrings</li>
	<li>Build Your Own Diamond Pendant</li>
	<li>Pre-set Diamond Stud Earrings from $250</li>
	</ul>
	</article>

	<article class="feature">
	<h3>Diamond Jewelry</h3>
	<img class="feature-pic" src="http://unsplash.it/300/200" alt="jewels" />
	<ul>
	<li>Build Your Own Earrings</li>
	<li>Build Your Own Diamond Pendant</li>
	<li>Pre-set Diamond Stud Earrings from $250</li>
	</ul>
	</article>

	</section>

	<footer class="row">
	footer
	</footer>
	</main>
	</body>
	</html>