How to line-break 2 anchors - html

Question

So I was trying to line-break my 2 anchors that i did using the <a> tag. They are inside a flip box.
Basically right now I have my 2 anchors inline but the problem is that I'm using flexbox on the container and I'm not really sure how I could break the 2nd anchor so it would be below my 1st anchor.
My HTML code : Codepen Link
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div style="display: flex; align-items: center; justify-content: center;" class="flip-box-back">
<i class="fas fa-download"></i>
<a href="#" download>download</a>
<hr>
<div class="break">
<i class="fas fa-eye"></i>
view
</div>
</div>
I alreay tried the <br> and <hr> on HTML but without success.
Example :
Thank you in advance, would be very grateful

Answer 1

You should add flex-flow: column; to your div which wraps your buttons
div {
display: flex;
flex-flow: column;
}
<div>
<button>1</button>
<button>2</button>
</div>

Answer 2

In your case you have to wrap each link and including the icon inside an element such as a div. Otherwise your icon and div will be placed all below each other and not just the 2 "buttons".
Then you can place each wrapped element by adding flex-direction: column;
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div style="display: flex; flex-direction: column; align-items: center; justify-content: center;" class="flip-box-back">
<div>
<i class="fas fa-download"></i>
<a href="#" download>download</a>
</div>
<div class="break">
<i class="fas fa-eye"></i>
view
</div>
</div>

Answer 3

Normally a flexbox is no-wrap so you need to add a property to let it break if there is no space left for 2 elements (also you can define the horizontal alignment to centered with justify-content) :
.flexbox{
display: flex;
}
.flexbox2{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.flexbox3{
display: flex;
flex-direction: column;
align-items: center;
}
button{
width: 60vw;
}
Default:
<div class="flexbox">
<button>Button1</button>
<button>Button2</button>
</div>
With (auto) wrap:
<div class="flexbox2">
<button>Button1</button>
<button>Button2</button>
</div>
With forced wrap (column view):
<div class="flexbox3">
<button>Button1</button>
<button>Button2</button>
</div>