flexbox-align-issues

flexbox-align-issues.markdown

flexbox-align-issues

A Pen by Marvin Trilles on CodePen.

License.

flexbox-issue.markdown

flexbox-issue

A Pen by Marvin Trilles on CodePen.

License.

index.html

<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>

style.css

.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;
}