title: flexbox containers and children structure
body: <p>The problem is whatever I change in one of the children??? classes seems to have no effect on the images?? which is why I've resorted to using style for each image...</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*************************/
  /* FLEX container */
  /************************/
  .fcon {
      display: flex;
      align-items: baseline;
      border-width: 1px;
      border-right-style: solid;
      border-left-style: solid;
      border-top-style: none;
      border-bottom-style: none;
      min-width: 0;
      background-color: black;
  
      /* images */
      .lt {
          flex: 30%;
          justify-content: flex-start;
          background-color: black;
          border-left-style: solid;
          border-width: 1px;
      }
  
      .m {
          flex: 40%;
          justify-content: center;
          border-style: solid black;
          border-color: black;
          border-width: 1px;
      }
  
      .rt {
          flex: 30%;
          justify-content: flex-end;
          border-style: solid black;
          border-color: black;
          border-width: 1px;
      }
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- The flexible grid (content) --&gt;
  &lt;div class="fcon"&gt;
      &lt;div class="lt"&gt;
          &lt;div&gt; &lt;img style="width:60px; height:60px;" src="watchmaker.png"&gt;&lt;/div&gt;
          &lt;div&gt; &lt;img style="width:60px; height:60px;" src="hamburger.png"&gt;&lt;/div&gt;
          &lt;div&gt; &lt;img style="width:60px; height:60px;" src="wm_my_watches.png"&gt;&lt;/div&gt;
          &lt;div&gt; &lt;img style="width:60px; height:60px;" src="wavygravy.png"&gt;&lt;/div&gt;
          &lt;div&gt; &lt;img style="width:60px; height:60px;" src="wm_send.png"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="m"&gt;
          &lt;div&gt; &lt;img style="width:200px;" src="left-arrow.gif"&gt;&lt;/div&gt;
          &lt;div&gt; &lt;img style="width:200px;" src="left-arrow.gif"&gt;&lt;/div&gt;
          &lt;div&gt; &lt;img style="width:200px;" src="left-arrow.gif"&gt;&lt;/div&gt;
          &lt;div&gt; &lt;img style="width:200px;" src="left-arrow.gif"&gt;&lt;/div&gt;
          &lt;div&gt; &lt;img style="width:200px;" src="left-arrow.gif"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="rt"&gt;
          &lt;div&gt; &lt;img style="width:60px; height:60px;" src="Tap.gif"&gt;&lt;/div&gt;
          &lt;div&gt; &lt;img style="width:60px; height:60px;" src="Tap.gif"&gt;&lt;/div&gt;
          &lt;div&gt; &lt;img style="width:60px; height:60px;" src="Tap.gif"&gt;&lt;/div&gt;
          &lt;div&gt; &lt;img style="width:60px; height:60px;" src="Tap.gif"&gt;&lt;/div&gt;
          &lt;div&gt; &lt;img style="width:60px; height:60px;" src="Tap.gif"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <hr>
  
  <p>For example if I change .rt's justify-content: flex-end ...nothing changes. The icons stay exactly where they are. Similarly if I put width or height attributes into .lt, .rt or .m nothing changes.</p>
  
  <p>So confused right now.</p>