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 charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="flex-1">
    <div class="col-1">
      1
    </div>
    <div class="col-2">
      <div class="inner">
        <div class="inner-1">
          Vertically centered please
        </div>
      </div>
    </div>
    <div class="col-3">
      <p>This</p>
      <p>content</p>
      <p>makes</p>
      <p>flex-box</p>
      <p>high</p>
    </div>
  </div>
</body>
</html>
 
.flex-1 {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: box;
  
  -webkit-box-align: strech;
  -moz-box-align: strech;
  -ms-box-align: strech;
  box-align: strech;
​
}
​
.col-1 {
  background-color: blue;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -ms-box-flex: 1;
  box-flex: 1;
  width: 1px;
}
.col-2 {
  background-color: lightgrey;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -ms-box-flex: 1;
  box-flex: 1;
  width: 1px;
}
.col-3 {
  background-color: lime;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -ms-box-flex: 1;
  box-flex: 1;
  width: 1px;
}
​
.inner {
  background-color: red;
   
  display: table;
  width: 100%;
  
  /* I canot specify a fixed height since the flex-box height is determined by the content of the green column. */
  height: 150px;
}
.inner-1 {
  
  background-color: pink;
  display: table-cell;
  vertical-align: middle;
}
​
/*
.inner-flex-box {
  background-color: red;
   
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: box;
 
  
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-box-align: center;
  box-align: center;
}
.inner-1 {
  background-color: blue;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -ms-box-flex: 1;
  box-flex: 1;
  width: 1px;
}*/
 
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers