FlexBox_habr justify-content

by Alex

HTML

<input type="radio" name="flex" id="flex-start" checked>
<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="space-between">
<label for="space-between">space-between</label>
<input type="radio" name="flex" id="space-around">
<label for="space-around">space-around</label>
    
<div class="flex">
    <div class="flex-itm">1</div>
    <div class="flex-itm">2</div>
    <div class="flex-itm">3</div>
</div>

CSS

html {
    font-family: sans-serif;
}

.flex {
    background: #a55;
    margin: 20px 0;
    padding: 5px;
    
    display: flex;
}
#flex-start:checked ~ .flex {
    justify-content: flex-start;
}
#flex-end:checked ~ .flex {
    justify-content: flex-end;
}
#center:checked ~ .flex {
    justify-content: center;
}
#space-between:checked ~ .flex {
    justify-content: space-between;
}
#space-around:checked ~ .flex {
    justify-content: space-around;
}
.flex-itm {
    background: #5a5;
    font-size: 2.5rem;
    color: #eee;
    margin: 5px;
    padding: 50px;
}