Flexbox align-self is not working in my layout - css

Question

Im trying to center #view-ctrls-cntnr horizontally inside of .menubar. When I use align-self: center it doesnt appear to do anything. What am I doing wrong, is there a better approach? JSFiddle.
HTML
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<section class="analysis">
<div class="menubar">
<div class="dropdown" id="file-btn">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</div>
<div id="view-ctrls-cntnr">
<div class="btn-group" role="group">
<button class="btn btn-default" ng-class="{'active-view': active_views[0]}" ng-click="toggleView(0)">R-Theta</button>
<button class="btn btn-default" ng-class="{'active-view': active_views[1]}" ng-click="toggleView(1)">Cartesian</button>
<button class="btn btn-default" ng-class="{'active-view': active_views[2]}" ng-click="toggleView(2)">Longitudinal</button>
<button class="btn btn-default" ng-class="{'active-view': active_views[3]}" ng-click="">Console</button>
</div>
</div>
</div>
<div id="views-cntnr">
<div id="r1" class="view-row">
<div id="v1" class="view">V1</div>
<div id="v2" class="view">V2</div>
<div id="v3" class="view">V3</div>
</div>
<div id="r2" class="view-row">
<div id="v4" class="view">V4</div>
</div>
</div>
<div id="frame-ctrl-cntnr">
<div id="frame-num" class="frame-ctrl"># X</div>
<div id="frame-range-cntnr" class="frame-ctrl">
<input type="range">
</div>
</div>
</section>
CSS
html,
body {
height: 100%;
}
.analysis {
display: flex;
flex-direction: column;
height: 100%;
}
/* MENUBAR */
.menubar {
padding: 4px 0 4px;
background-color: #eee;
border: hsl(0, 0%, 75%) solid 1px;
border-right: none;
border-left: none;
display: flex;
}
#view-ctrls-cntnr {
align-self: center;
}
#file-btn a {
color: black;
text-decoration:none
}
/* menubar */
/* VIEWS */
#views-cntnr {
display: flex;
flex-direction: column;
flex-grow: 1;
}
/* ROWS */
/* ROW 1 */
#r1 {
display: flex;
flex-grow: 4;
}
#r1 .view {
flex-grow: 1;
border: black 1px solid;
border-top: none;
border-right: none;
}
#r1 .view:last-child {
border-right: black 1px solid;
}
/* row 1 */
/* ROW 2 */
#r2 .view {
border: black 1px solid;
border-top: none;
flex-grow: 1;
}
#r2 {
display: flex;
flex-grow: 1;
}
/* row 2 */
/* rows */
/* views */
/* FRAME CTRL */
#frame-ctrl-cntnr {
display: flex;
}
.frame-ctrl {
border: black 1px solid;
border-top: none;
border-right: none;
}
.frame-ctrl:last-child {
border-right: black 1px solid;
}
#frame-num {
width: 50px;
}
#frame-range-cntnr {
flex-grow: 1;
padding: 4px;
}
/* frame ctrl */

Answer 1

You can use nested flexbox to center the inner element instead.
jsFiddle
#view-ctrls-cntnr {
flex: 1;
display: flex;
justify-content: center;
}
Or you could use the margin tricks:
jsFiddle
#view-ctrls-cntnr {
margin-left: auto;
margin-right: auto;
}
Note, it's #view-ctrls-cntnr not .view-ctrls-cntnr.
Edit: to center it in the entire viewport width, you can set the sibling element to absolute position: #file-btn {position: absolute;} This may cause overlapping in small viewport width.
jsFiddle
Other than that, you can give the left sibling a fixed width, i.e. 80px and add a pseudo :after element on the container with same width set. So that there will be equal space on the left and right.
.menubar:after {
content: "";
width: 80px;
}
#file-btn {
width: 80px;
}
jsFiddle