FlexBox_habr align-items

by alantoo

HTML

<div>align-items</div>
<input type="radio" name="flex" id="flex-start">
<label for="flex-start">flex-start</label>
<input type="radio" name="flex" id="flex-end">
<label for="flex-end">flex-end</label>
<input type="radio" name="flex" id="center">
<label for="center">center</label>
<input type="radio" name="flex" id="baseline">
<label for="baseline">baseline</label>
<input type="radio" name="flex" id="stretch" checked>
<label for="stretch">stretch (default)</label>
<hr>
<div>align-content</div>
<input type="radio" name="flex1" id="flex-start1">
<label for="flex-start1">flex-start</label>
<input type="radio" name="flex1" id="flex-end1">
<label for="flex-end1">flex-end</label>
<input type="radio" name="flex1" id="center1">
<label for="center1">center</label>
<input type="radio" name="flex1" id="space-between1">
<label for="space-between1">space-between</label>
<input type="radio" name="flex1" id="space-around1">
<label for="space-around1">space-around</label>
<input type="radio" name="flex1" id="stretch1" checked>
<label for="stretch1">stretch (default)</label>
    
<div class="flex">
    <div class="flex-itm">1</div>
    <div class="flex-itm">2</div>
    <div class="flex-itm">3</div>
    <div class="flex-itm">4</div>
    <div class="flex-itm">5</div>
    <div class="flex-itm">6</div>
    <div class="flex-itm">7</div>
    <div class="flex-itm">8</div>
    <div class="flex-itm">9</div>
</div>

CSS

html {
    font-family: sans-serif;
}

.flex {
    background: #a55;
    height: 600px;
    margin: 20px 0;
    padding: 5px;
    
    display: flex;
    flex-wrap: wrap;
}
#flex-start:checked ~ .flex {
    align-items: flex-start;
}
#flex-end:checked ~ .flex {
    align-items: flex-end;
}
#center:checked ~ .flex {
    align-items: center;
}
#baseline:checked ~ .flex {
    align-items: baseline;
}
#stretch:checked ~ .flex {
    align-items: stretch;
}

#flex-start1:checked ~ .flex {
    align-content: flex-start;
}
#flex-end1:checked ~ .flex {
    align-content: flex-end;
}
#center1:checked ~ .flex {
    align-content: center;
}
#space-between1:checked ~ .flex {
    align-content: space-between;
}
#space-around1:checked ~ .flex {
    align-content: space-around;
}
#stretch1:checked ~ .flex {
    align-content: stretch;
}
.flex-itm {
    background: #5a5;
    font-size: 2.5rem;
    color: #eee;
    margin: 5px;
    padding: 50px;
}
.flex-itm:nth-child(3n) {
    font-size: 1.5rem;
    padding: 10px 50px;
}
.flex-itm:nth-child(3n+1) {
    font-size: 2rem;
    padding: 30px 50px;
}
.flex-itm:nth-child(3n+2) {
    padding: 70px 50px;
}