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 Cheatsheet">
    <title>Flexbox Cheatsheet</title>
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Flexbox Cheatsheet</h1>
​
    <h3>flex-direction</h3>
   
    <div style="display: flex; ">
      <div>flex-direction:</div>
      <div>row (default)</div>
    </div>
    
    <div style="display: flex; flex-direction: row-reverse;">
      <div>row-reverse</div>
      <div>flex-direction:</div>
    </div>
​
    <div style="display: flex; flex-direction:column; height: 150px;">
      <div>flex-direction:</div>
      <div>column</div>
    </div>
    
    <div style="display: flex; flex-direction:column-reverse; height: 150px;">
      <div>column-reverse</div>
      <div>flex-direction:</div>
    </div>
    
    <h3>flex</h3>
    
    <div style="display: flex; ">
      <div>normal div</div>
      <div style="flex: 1;">flex: 1;</div>
      <div>normal div</div>
    </div>
​
    <div style="display: flex;">
      <div style="flex: 3;">flex: 3;</div>
      <div style="flex: 1;">flex: 1;</div>
      <div style="flex: 2;">flex: 2;</div>
    </div>
    
    <h3>align-items</h3>
    
    <div style="display: flex; align-items: scretch;">
      <div>align-items: scretch (default)</div>
    </div>
​
    <div style="display: flex; align-items: flex-start;">
      <div>align-items: flex-start</div>
    </div>
​
    <div style="display: flex; align-items: center;">
      <div>align-items: center</div>
    </div>
    
    <div style="display: flex; align-items: flex-end;">
      <div>align-items: flex-end</div>
    </div>
    
    <h3>justify-content</h3>
​
    <div style="display: flex; justify-content: flex-start;">
      <div>justify-content: flex-start (default)</div>
    </div>
​
    <div style="display: flex; justify-content: center;">
      <div>justify-content: center</div>
    </div>
​
    <div style="display: flex; justify-content: flex-end;">
      <div>justify-content: flex-end</div>
    </div>
​
    <div style="display: flex; justify-content: space-around;">
      <div>justify-content: <br>space-around;</div>
      <div>justify-content: <br>space-around;</div>
    </div>
​
    <div style="display: flex; justify-content: space-between;">
      <div>justify-content: <br>space-between;</div>
      <div>justify-content: <br>space-between;</div>
    </div>
​
    <h3>align-self</h3>
    
    <div style="display: flex; height: 150px;">
      <div style="flex: 1; align-self: flex-start;">flex-start</div>
      <div style="flex: 1; align-self: center;">center</div>
      <div style="flex: 1; align-self: flex-end;">flex-end</div>
      <div style="flex: 1; align-self: stretch">stretch<br>(default)</div>
    </div>
    
    <h3>flex-wrap</h3>
​
    <div style="display: flex; flex-wrap: wrap; width:150px; height:70px">
      <div>horizontal</div>
      <div>lay</div>
      <div>out</div>
      <div>wrap</div>
    </div>
  </body>
</html>
Output

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

Dismiss x
public
Bin info
kasperpeulenpro
0viewers