Skip to content

Instantly share code, notes, and snippets.

@teethnclaws

teethnclaws/index.html

Created March 5, 2019 02:24
Show Gist options
  • Save teethnclaws/abce2ea6c2e457db7508fc52384c9893 to your computer and use it in GitHub Desktop.
Save teethnclaws/abce2ea6c2e457db7508fc52384c9893 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin align-items // source https://jsbin.com/lahurew
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="align-items">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
.container{
display: flex;
min-height: 100px;
}
.one{
/* default */
align-items: stretch;
}
.two{
align-items: flex-start;
}
.three{
align-items: flex-end;
}
.four{
align-items: center;
}
.five{
align-items: baseline;
}
/*basic styling*/
.container{
border: 4px solid #61585E;
margin-bottom: 10px;
}
.container > *{
background-color: #EA3556;
padding: 5px;
color: white;
width: 100px;
}
.container > *:nth-child(even){
background-color: #49AEC0;
}
</style>
</head>
<body>
<!-- BEGIN LESSON CODE -->
<div class="container one">
<div>1<br>-<br>-</div>
<div>2<br>-<br>-<br>-</div>
<div><h2>3</h1></div>
<div>4<br>-</div>
</div>
<div class="container two">
<div>1<br>-<br>-</div>
<div>2<br>-<br>-<br>-</div>
<div><h2>3</h1></div>
<div>4<br>-</div>
</div>
<div class="container three">
<div>1<br>-<br>-</div>
<div>2<br>-<br>-<br>-</div>
<div><h2>3</h1></div>
<div>4<br>-</div>
</div>
<div class="container four">
<div>1<br>-<br>-</div>
<div>2<br>-<br>-<br>-</div>
<div><h2>3</h1></div>
<div>4<br>-</div>
</div>
<div class="container five">
<div>1<br>-<br>-</div>
<div>2<br>-<br>-<br>-</div>
<div><h2>3</h2></div>
<div>4<br>-</div>
</div>
<!-- END LESSON CODE -->
<script id="jsbin-source-css" type="text/css">.container{
display: flex;
min-height: 100px;
}
.one{
/* default */
align-items: stretch;
}
.two{
align-items: flex-start;
}
.three{
align-items: flex-end;
}
.four{
align-items: center;
}
.five{
align-items: baseline;
}
/*basic styling*/
.container{
border: 4px solid #61585E;
margin-bottom: 10px;
}
.container > *{
background-color: #EA3556;
padding: 5px;
color: white;
width: 100px;
}
.container > *:nth-child(even){
background-color: #49AEC0;
}</script>
</body>
</html>
Raw
jsbin.lahurew.css
.container{
display: flex;
min-height: 100px;
}
.one{
/* default */
align-items: stretch;
}
.two{
align-items: flex-start;
}
.three{
align-items: flex-end;
}
.four{
align-items: center;
}
.five{
align-items: baseline;
}
/*basic styling*/
.container{
border: 4px solid #61585E;
margin-bottom: 10px;
}
.container > *{
background-color: #EA3556;
padding: 5px;
color: white;
width: 100px;
}
.container > *:nth-child(even){
background-color: #49AEC0;
}
@teethnclaws
Copy link
Author

stretch (default): stretch to fill the container (still respect min-width/max-width)
flex-start: cross-start margin edge of the items is placed on the cross-start line
flex-end: cross-end margin edge of the items is placed on the cross-end line
center: items are centered in the cross-axis
baseline: items are aligned such as their baselines align

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment