<div class="wrapper">
<h2>Align Content Properties</h2>
<div class="icon">↓</div>
<div class="radio_tabs">
<label class="radio_wrap" data-radio="radio_1">
<input type="radio" name="flex" class="input" checked>
<span class="radio_mark">
Flex-Start
</span>
</label>
<label class="radio_wrap" data-radio="radio_2">
<input type="radio" name="flex" class="input">
<span class="radio_mark">
Flex-end
</span>
</label>
<label class="radio_wrap" data-radio="radio_3">
<input type="radio" name="flex" class="input">
<span class="radio_mark">
Center
</span>
</label>
<label class="radio_wrap" data-radio="radio_4">
<input type="radio" name="flex" class="input">
<span class="radio_mark">
space-between
</span>
</label>
<label class="radio_wrap" data-radio="radio_5">
<input type="radio" name="flex" class="input">
<span class="radio_mark">
space-around
</span>
</label>
<label class="radio_wrap" data-radio="radio_6">
<input type="radio" name="flex" class="input">
<span class="radio_mark">
stretch
</span>
</label>
</div>
<div class="content">
<div class="radio_content radio_1">
<h3> Align-Content: Flex-Start</h3>
<div class="flex-parent align-content-start">
<div class="flex-child flex-child-1">
1
</div>
<div class="flex-child flex-child-2">
2
</div>
<div class="flex-child flex-child-3">
3
</div>
<div class="flex-child flex-child-4">
4
</div>
<div class="flex-child flex-child-5">
5
</div>
<div class="flex-child flex-child-6">
6
</div>
<div class="flex-child flex-child-7">
7
</div>
</div>
</div>
<div class="radio_content radio_2">
<h3> Align-Content: Flex-end</h3>
<div class="flex-parent align-content-end">
<div class="flex-child flex-child-1">
1
</div>
<div class="flex-child flex-child-2">
2
</div>
<div class="flex-child flex-child-3">
3
</div>
<div class="flex-child flex-child-4">
4
</div>
<div class="flex-child flex-child-5">
5
</div>
<div class="flex-child flex-child-6">
6
</div>
<div class="flex-child flex-child-7">
7
</div>
</div>
</div>
<div class="radio_content radio_3">
<h3> Align-Content: Center</h3>
<div class="flex-parent align-content-center">
<div class="flex-child flex-child-1">
1
</div>
<div class="flex-child flex-child-2">
2
</div>
<div class="flex-child flex-child-3">
3
</div>
<div class="flex-child flex-child-4">
4
</div>
<div class="flex-child flex-child-5">
5
</div>
<div class="flex-child flex-child-6">
6
</div>
<div class="flex-child flex-child-7">
7
</div>
</div>
</div>
<div class="radio_content radio_4">
<h3> Align-Content: space-between</h3>
<div class="flex-parent align-content-between">
<div class="flex-child flex-child-1">
1
</div>
<div class="flex-child flex-child-2">
2
</div>
<div class="flex-child flex-child-3">
3
</div>
<div class="flex-child flex-child-4">
4
</div>
<div class="flex-child flex-child-5">
5
</div>
<div class="flex-child flex-child-6">
6
</div>
<div class="flex-child flex-child-7">
7
</div>
</div>
</div>
<div class="radio_content radio_5">
<h3> Align-Content: space-around</h3>
<div class="flex-parent align-content-around">
<div class="flex-child flex-child-1">
1
</div>
<div class="flex-child flex-child-2">
2
</div>
<div class="flex-child flex-child-3">
3
</div>
<div class="flex-child flex-child-4">
4
</div>
<div class="flex-child flex-child-5">
5
</div>
<div class="flex-child flex-child-6">
6
</div>
<div class="flex-child flex-child-7">
7
</div>
</div>
</div>
<div class="radio_content radio_6">
<h3> Align-Content: stretch</h3>
<div class="flex-parent align-content-stretch">
<div class="flex-child flex-child-1">
1
</div>
<div class="flex-child flex-child-2">
2
</div>
<div class="flex-child flex-child-3">
3
</div>
<div class="flex-child flex-child-4">
4
</div>
<div class="flex-child flex-child-5">
5
</div>
<div class="flex-child flex-child-6">
6
</div>
<div class="flex-child flex-child-7">
7
</div>
</div>
</div>
</div>
</div>
*{
margin:0;
padding:0;
box-sizing: border-box;
font-family: 'Exo 2', sans-serif;
}
.wrapper{
width: 70%;
height: auto;
padding: 30px;
margin: 50px auto;
}
.wrapper .radio_tabs{
height: 60px;
background-color: #fff;
border-radius: 5px;
margin-bottom: 10px;
font-size:10px;
padding: 18px 5px;
display: flex;
box-shadow: 0 0 2px rgba(0,0,0,0.1);
}
.wrapper .radio_tabs label{
margin-right: 15px;
display: block;
position: relative;
cursor: pointer;
padding-left:28px;
}
.wrapper .radio_tabs label .input:checked ~.radio_mark{
color: #0075FF;
}
.wrapper .content{
width: 100%;
height: calc(100% - 70px);
background: #fff;
border: 5px solid #70409F;
border-radius: 5px;
padding: 18px;
box-shadow: 0 0 2px rgba(0,0,0,0.1);
}
.flex-parent{
display:flex;
/* margin-bottom:50px; */
text-align: center;
height: 400px;
flex-wrap: wrap;
}
.flex-child{
width:100px;
min-height: 50px;
padding:20px;
/* line-height:150px; */
display: flex;
align-items: center;
justify-content: center;
margin:5px;
text-align: center;
font-size: 20px;
font-weight: bold;
}
.flex-child-1{
background-color:#A6E7FF;
}
.flex-child-2{
background-color:#C8F1D6;
}
.flex-child-3{
background-color:#E6D0F7;
}
.flex-child-4{
background-color:#FFDDD3;
}
.flex-child-5{
background-color:#00FFFF;
}
.flex-child-6{
background-color:#C3CDE6;
}
.flex-child-7{
background-color:#E6D0F7;
}
.align-content-start{
align-content: flex-start;
}
.align-content-end{
align-content: flex-end;
}
.align-content-center{
align-content: center;
}
.align-content-between{
align-content: space-between;
}
.align-content-around{
align-content: space-around;
}
.align-content-stretch{
align-content: stretch;
}
h3{
margin-bottom: 20px;
}
h2{
text-align: center;
margin-bottom: 10px;
font-size: 30px;
font-weight: bold;
}
.icon {
text-align: center;
font-size: 25px;
margin-bottom: 5px;
}
$(document).ready(function () {
// default hide all radio conteny
$(".content .radio_content").hide();
$(".content .radio_content:first-child").show();
$(".radio_wrap").click(function () {
var currrent_radio = $(this).attr("data-radio");
$(".content .radio_content").hide();
$("." + currrent_radio).show();
});
});
