Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS flexbox positioning
<h1>Positioning HTML elements with CSS flexbox</h1>
<div class="wrapper">
<div class="container top-left">
<div class="box"></div>
</div>
<div class="container top-center">
<div class="box"></div>
</div>
<div class="container top-right">
<div class="box"></div>
</div>
<div class="container center-left">
<div class="box"></div>
</div>
<div class="container center-center">
<div class="box"></div>
</div>
<div class="container center-right">
<div class="box"></div>
</div>
<div class="container bottom-left">
<div class="box"></div>
</div>
<div class="container bottom-center">
<div class="box"></div>
</div>
<div class="container bottom-right">
<div class="box"></div>
</div>
</div>
/*--- Temp styling ---*/
.wrapper{
display: flex;
flex-wrap: wrap;
max-width: 570px;
}
.container{
background: #999;
width: 180px;
height: 180px;
margin: 5px;
}
.box{
width: 60px;
height: 60px;
background: orange;
}
/*--- Positioning with flexbox---*/
.container{display: flex;}
.top-left {align-items: flex-start; justify-content: flex-start; }
.top-center {align-items: flex-start; justify-content: center;}
.top-right {align-items: flex-start; justify-content: flex-end;}
.center-left {align-items: center; justify-content: flex-start; }
.center-center {align-items: center; justify-content: center;}
.center-right {align-items: center; justify-content: flex-end;}
.bottom-left {align-items: flex-end; justify-content: flex-start;}
.bottom-center {align-items: flex-end; justify-content: center;}
.bottom-right {align-items: flex-end; justify-content: flex-end;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment