Skip to content

Instantly share code, notes, and snippets.

@guimello

guimello/index.html

Created May 19, 2016 14:57
Show Gist options
  • Save guimello/127e377652aa718323fe0ae898907848 to your computer and use it in GitHub Desktop.
Save guimello/127e377652aa718323fe0ae898907848 to your computer and use it in GitHub Desktop.
Download ZIP
Playing with flexbox ![jsbin](http://jsbin.com/yisuwirehi/edit?html,css,output)
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">9999 99999999 9999999999 99999999999 sdfjk f ehwkjfwe fkjwewlek fwefn</div>
<div class="item">8</div>
</div>
<div class="container-2">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class="container-3">
<div class="item">
<div class="handle"><div>1.</div></div>
<div class="text"><div>lolwut rolf</div></div>
</div>
<div class="item">
<div class="handle"><div>2.</div></div>
<div class="text"><div>lolwut rolf mao sadf oi wefoijw eiofjw eisdfsdf sadf asd fsad fasdf asdofw jeiofw ejiofwe</div></div>
</div>
<div class="item">
<div class="handle"><div>3.</div></div>
<div class="text"><div>lolwut rolf</div></div>
</div>
</div>
</body>
</html>
Raw
style.css
body {
//width: 400px;
}
.container {
background-color: red;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.container .item {
background-color: blue;
flex-grow: 1;
}
.container .item:first-child {
flex-grow: 2;
}
.container .item:last-child {
//flex-shrink: 3;
}
.container-2 {
background-color: red;
display: flex;
flex-direction: row;
justify-content: center;
}
.container-2 .item {
background-color: blue;
width: 40px;
text-align: center;
}
.container-3 {
margin-top: 40px;
display: flex;
flex-direction: column;
background-color: red;
}
.container-3 .item {
background-color: blue;
width: 200px;
min-height: 50px;
margin: 10px auto;
display: flex;
}
.container-3 .item .handle {
text-align: center;
//align-self: stretch;
margin-right: 5px;
background-color: green;
display: inline-flex;
//align-items: center;
}
.container-3 .item .handle div {
//margin: auto;
align-self: center;
width: 20px;
}
.container-3 .item .text {
display: inline-flex;
margin: 5px 5px;
}
.container-3 .item .text div {
align-self: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment