title: Vertically center and left-align a column of flex items
body: <p>Requirements</p>
  
  <ol>
  <li>flexbox</li>
  <li>vertically middle</li>
  <li>horizontally left</li>
  <li>vertically stacked child elements</li>
  <li>number of child elements can be one or multiple</li>
  <li>use the old syntax so that Android 4.2 understands</li>
  </ol>
  
  <p>Sounds difficult to describe. The pink box in the demo is the look I want. The green box is already good, only that I don't know how to do with multiple child elements.</p>
  
  <p>I think the solution may be a combination of the following, but I cannot make it.</p>
  
  <pre><code>align-items: center;
  flex-direction: column;
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 1em .5em;
  }
  article {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  
  section {
    height: 18em;
    background: #ccc;
    margin: 0 .5em;
    position: relative;
    display: flex;
    align-items: center;
  }
  section:after {
    font-size: smaller;
    color: blue;
    position: absolute;
    bottom: 0;
  }
  section.big {
    width: 20%;
    height: 5em;
  }
  section.small {
    width: 10%;
    flex: 1;
  }
  section div {
    outline: 1px dotted green;
  }
  section.want {
    background-color: pink;
  }
  section.want:after {
    content: "1) want to do like this: vertically middle, horizontally left, while section will contain one or several child elements";
  }
  section.only1 {
    background-color: lightgreen;
  }
  section.only1:after {
    content: "2) all good except one point:the number of child element must be one.";
  }
  section.row:after {
    content: "3) by default flex-diraction is row";
  }
  section.col {
    flex-direction: column;
  }
  section.col:after {
    content: "4) this can vertically stack multiple stacks, but they no longer horizontally left-align";
  }
  section.col.justify {
    justify-content: center;
    align-items: flex-start;
    background-color: lightblue;
  }
  section.col.justify:after {
    content: "6) this is good!  Solved.";
  }
  section.colmar {
    flex-direction: column;
  }
  section.colmar:after {
    content: "5) this can vertically stack multiple stacks, and left-align divs, but divs are not vertically center";
  }
  section.colmar div {
    margin-right: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;article&gt;
    &lt;section class="small want"&gt;
      line1
      &lt;br/&gt;line2
    &lt;/section&gt;
    &lt;section class="small only1"&gt;
      &lt;div&gt;only 1 div&lt;/div&gt;
    &lt;/section&gt;
    &lt;section class="small row"&gt;
      &lt;div&gt;div1&lt;/div&gt;
      &lt;div&gt;div2&lt;/div&gt;
    &lt;/section&gt;
    &lt;section class="small col"&gt;
      &lt;div&gt;div1&lt;/div&gt;
      &lt;div&gt;div2&lt;/div&gt;
    &lt;/section&gt;
    &lt;section class="small colmar"&gt;
      &lt;div&gt;div1&lt;/div&gt;
      &lt;div&gt;div2&lt;/div&gt;
    &lt;/section&gt;
    &lt;section class="small col justify"&gt;
      &lt;div&gt;div1&lt;/div&gt;
      &lt;div&gt;div2&lt;/div&gt;
    &lt;/section&gt;
  &lt;/article&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://codepen.io/anon/pen/pjVoJL" rel="noreferrer">codepen demo</a></p>