Skip to content

Instantly share code, notes, and snippets.

@trashvin
Last active December 14, 2017 11:56
Show Gist options
  • Save trashvin/edaec01d0b62f6ab193d57cebbd14622 to your computer and use it in GitHub Desktop.
Save trashvin/edaec01d0b62f6ab193d57cebbd14622 to your computer and use it in GitHub Desktop.
flexbox-align-issues
<div class="container space-between">
<div class="child" style="max-height: 100px">CHILD1</div>
<div class="child yellow-div" style="max-height: 50px ! important">CHILD2</div>
<div class="child gray-div" style="max-height: 150px">CHILD3</div>
<div class="child pink-div">CHILD4</div>
</div>
<hr/>
<div class="container space-between">
<div class="child-start" style="min-height: 100px">CHILD1</div>
<div class="child-end yellow-div" style="min-height: 50px">CHILD2??</div>
<div class="child-center gray-div" style="min-height: 150px">CHILD3??</div>
<div class="child-stretch pink-div">CHILD4</div>
</div>
.container {
display: flex;
min-height: 300px !important;
}
.space-between {
justify-content: space-between;
}
.align-end {
align-self: flex-end;
}
.align-center {
align-self: center;
}
.child {
min-height: 30px !important;
min-width: 100px !important;
border: dashed;
}
.child-start {
min-width: 100px !important;
border: dashed;
align-self: flex-start;
}
.child-center {
min-width: 100px !important;
border: dashed;
align-self: center;
}
.child-end {
min-width: 100px !important;
border: dashed;
align-self: flex-end;
}
.child-stretch {
min-width: 100px !important;
border: dashed;
align-self: stretch;
}
div.yellow-div {
background: yellow;
}
div.blue-div {
background: blue;
}
div.pink-div {
background: pink;
}
div.gray-div {
background: gray;
}
div.brown-div {
background: brown;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment