HTML element position won't change

I’m working on a "easy" dashboard layout to get in touch with Css better. Now I have the problem my links are next to each othe instead of underneath.
`

<div class="column is-one-fourth menu">
                <a href="dashboard.html" class="fxlarge">Dashboard</a>
                <a href="dashboard.html" class="fxlarge">Account</a>
                <a href="dashboard.html" class="fxlarge">Help</a>
                <a href="dashboard.html" class="fxlarge fred">Logout</a>
</div>

My CSS:

.menu{
    display: flex;
    justify-content: center;
    align-items: center;
}

I’m looking forward for your help,
thanks.

I treied to play around with justify-content and align items but nothing helped.

>Solution :

just set the menu to be flex-direction to column and anchor’s to be block type, this should fix your issue.

.menu{
    display: flex;
    justify-content: center;
    align-items: center;  
    flex-direction: column;
}
.menu > a {
    display: block;
}