Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <meta name="description" content="Flexbox Alignment Issue" />
    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no" />
    <title>Flexbox alignment issue</title>
  </head>
​
  <body>
    
    <div>
      <div></div>
      <div></div>
      <div></div>
    </div>
      
    <div>
      <div></div>
      <div><span>contains span</span></div>
      <div></div>
    </div>
      
    <div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    
  </body>
</html>
​
 
body, html {
  height: 100%;
}
​
body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
​
body>div {
  display: flex;
}
​
body>div>div {
  border: solid 1px blue;
}
​
div {
  flex-grow: 1;
}
​
body>div:nth-child(2)>div:nth-child(2) {
  display: flex;
  align-items: center;
  justify-content: center;
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
moonhighwaypro
0viewers