Skip to content

Instantly share code, notes, and snippets.

@MOOOWOOO

MOOOWOOO/flex.css

Created August 11, 2016 04:59
Show Gist options
  • Save MOOOWOOO/bb286c51452c816efbfd97f27647f9e1 to your computer and use it in GitHub Desktop.
Save MOOOWOOO/bb286c51452c816efbfd97f27647f9e1 to your computer and use it in GitHub Desktop.
Download ZIP
flex
Raw
flex.css
.one-box {
display : flex;
justify-content : center;
align-items : center;
}
.two-one-box {
display : flex;
flex-direction : column;
justify-content : space-between;
align-items : center;
}
.two-two-box {
display : flex;
}
.two-two-box .item:nth-child(2) {
align-self : center;
}
.three-box {
display : flex;
}
.three-box .item:nth-child(2) {
align-self : center;
}
.three-box .item:nth-child(1) {
align-self : flex-end;
}
.four-one-box {
display : flex;
flex-wrap : wrap;
justify-content : flex-end;
align-content : space-between;
}
.four-two-box {
display : flex;
flex-wrap : wrap;
align-content : space-between;
}
.four-two-box .column {
display : flex;
flex-basis : 100%;
justify-content : space-between;
}
.five-one-box {
display : flex;
flex-wrap : wrap;
}
.five-one-box .column {
display : flex;
flex-basis : 100%;
justify-content : space-between;
}
.five-one-box .column:nth-child(2) {
justify-content : center;
}
.six-one-box {
display : flex;
flex-wrap : wrap;
align-content : space-between;
}
.six-two-box {
display : flex;
flex-wrap : wrap;
align-content : space-between;
flex-direction : column;
}
.six-three-box {
display : flex;
flex-wrap : wrap;
}
.six-three-box .column {
display : flex;
flex-basis : 100%;
justify-content : space-between;
}
.six-three-box .column:nth-child(2) {
justify-content : center;
}
/* OTHER STYLES */
* {
box-sizing : border-box;
}
html, body {
height : 100%;
background-color : #000000;
}
body {
display : flex;
align-items : center;
justify-content : center;
vertical-align : center;
flex-wrap : wrap;
align-content : center;
font-family : 'Open Sans', sans-serif;
background : linear-gradient(top, #222222, #333333);
}
[class$="box"] {
margin : 16px;
padding : 4px;
background-color : #E7E7E7;
width : 104px;
height : 104px;
object-fit : contain;
box-shadow : inset 0 5px white,
inset 0 -5px #BBBBBB,
inset 5px 0 #D7D7D7,
inset -5px 0 #D7D7D7;
border-radius : 10%;
}
.item {
display : block;
width : 24px;
height : 24px;
border-radius : 50%;
margin : 4px;
background-color : #333333;
box-shadow : inset 0 3px #111111, inset 0 -3px #555555;
}
.one {
background-color: red;
}
.two {
background-color: blue;
}
.three {
background-color: yellow;
}
.four {
background-color: green;
}
.five {
background-color: purple;
}
.six {
background-color: brown;
}
.InputAddOn {
display: flex;
}
.InputAddOn-field {
flex: 1;
}
Raw
flex.html
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title></title>
<link href = "flex.css" rel = "stylesheet">
</head>
<body>
<div class = "one-box">
<span class = "item one"></span>
</div>
<div class = "two-one-box">
<span class = "item one"></span>
<span class = "item two"></span>
</div>
<div class = "two-two-box">
<span class = "item one"></span>
<span class = "item two"></span>
</div>
<div class = "three-box">
<span class = "item one"></span>
<span class = "item two"></span>
<span class = "item three"></span>
</div>
<div class = "four-one-box">
<span class = "item one"></span>
<span class = "item two"></span>
<span class = "item three"></span>
<span class = "item four"></span>
</div>
<div class = "four-two-box">
<div class = "column">
<span class = "item one"></span>
<span class = "item two"></span>
</div>
<div class = "column">
<span class = "item three"></span>
<span class = "item four"></span>
</div>
</div>
<div class = "five-one-box">
<div class = "column">
<span class = "item one"></span>
<span class = "item two"></span>
</div>
<div class = "column">
<span class = "item three"></span>
</div>
<div class = "column">
<span class = "item four"></span>
<span class = "item five"></span>
</div>
</div>
<div class = "six-one-box">
<span class = "item one"></span>
<span class = "item two"></span>
<span class = "item three"></span>
<span class = "item four"></span>
<span class = "item five"></span>
<span class = "item six"></span>
</div>
<div class = "six-two-box">
<span class = "item one"></span>
<span class = "item two"></span>
<span class = "item three"></span>
<span class = "item four"></span>
<span class = "item five"></span>
<span class = "item six"></span>
</div>
<div class = "six-three-box">
<div class = "column">
<span class = "item one"></span>
<span class = "item two"></span>
<span class = "item three"></span>
</div>
<div class = "column">
<span class = "item four"></span>
</div>
<div class = "column">
<span class = "item five"></span>
<span class = "item six"></span>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment