CODEWITHSUNDEEP
htmlcssflexbox
Ksthawma
Ksthawma

Reputation: 1285

Vertically center and left-align a column of flex items

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

Upvotes: 45

Views: 94428

Answers (3)

ryansl39
ryansl39

Reputation: 9

Setting the height solved the problem for me.

Upvotes: 0

Arash MAS
Arash MAS

Reputation: 146

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.

Upvotes: 1

Michael Benjamin
Michael Benjamin

Reputation: 371013

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:

Learn more about flex alignment along the cross axis here:

Upvotes: 117

Related Questions