flex-direction set column has no effect
<section class="layout flexbox">
<style>
.layout.flexbox .top-center-bottom{
display: flex;
flex-direction: column;
}
.layout.flexbox .top{
height: 100px;
background-color: red;
}
.layout.flexbox .center{
flex: 1;
background: yellow;
}
.layout.flexbox .bottom{
height: 100px;
background-color: blue;
}
</style>
<article class="top-center-bottom">
<div class="top"></div>
<div class="center">
<h1>flexbox</h1>
</div>
<div class="bottom"></div>
</article>
</section>
