CSS Flex Box: How to vertically align “flex items” to middle without losing flex item height?

Question

Currently my \"flex\" items look like this (vertically aligned: top)...

 _____________________________________
   1

 _____________________________________
          


        

Answer 1

Perhaps I'm misunderstanding, but can't you just do:

HTML (Slim)

.container
  .item 1
  .item 2
  .item 3
  .item 4

CSS

.container {
  display:flex;
  flex-direction: column;
  height: 100vh;
}
.item {
  flex-grow: 1;
  display:flex; 
  align-items:center;
  border-bottom:2px solid #e8e288;
}

Here's a Codepen