I would like to know why flex is acting like its direction as column instead of row. How can I center them vertically and span.b element is at the end of the block?
header {
display: flex;
background: green;
flex-direction: row;
height: 50px;
}
.a {
align-self: center;
}
.b {
align-self: end;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<header>
<span class="a">a</span>
<span class="b">b</span>
</header>
</body>
</html>