Vertically center and left-align a column of flex items

Question

Requirements

1. flexbox
2. vertically middle
3. horizontally left
4. vertically stacked child elements
5. number of child elements can be one or multiple
6. use the old syntax so that Android 4.2 understands

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.

I think the solution may be a combination of the following, but I cannot make it.

align-items: center; flex-direction: column; 

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;  }

<article>    <section class="small want">      line1      <br/>line2    </section>    <section class="small only1">      <div>only 1 div</div>    </section>    <section class="small row">      <div>div1</div>      <div>div2</div>    </section>    <section class="small col">      <div>div1</div>      <div>div2</div>    </section>    <section class="small colmar">      <div>div1</div>      <div>div2</div>    </section>    <section class="small col justify">      <div>div1</div>      <div>div2</div>    </section>  </article>

codepen demo

Answer 1

justify-content aligns flex items along the main axis.

align-items aligns flex items along the cross axis, which is always perpendicular to the main axis.

Depending on the flex-direction, the main axis may be horizontal or vertical.

Since flex-direction:column means the main axis is vertical, you need to use justify-content not align-items to center the flex items.

Here's an example:

#container {    display: flex;    flex-direction: column;    justify-content: center;    height: 200px;    background-color: lightpink;  }

<div id="container">    <div class="box">div 1</div>    <div class="box">div 2</div>    <div class="box">div 3</div>    <div class="box">div 4</div>    <div class="box">div 5</div>  </div>

Learn more about flex alignment along the main axis here:

• In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Learn more about flex alignment along the cross axis here:

• How does flex-wrap work with align-self, align-items and align-content?

Answer 2

I think if you put the column div in the vertically in the center of the wrapper div (let's call it your row div) with this:

align-self: center; 

And put the contents of the column div in the middle of it:

text-align: center; 

It will work the way you want.