<div class="wrapper">
            <h2>Flex Flow Properties</h2>
            <div class="icon">&#8595;</div>
            <div class="radio_tabs">
                <label class="radio_wrap" data-radio="radio_1">
                    <input type="radio" name="wrap" class="input" >
                    <span class="radio_mark">
                        Row Wrap
                    </span>
                </label>
                <label class="radio_wrap" data-radio="radio_2">
                    <input type="radio" name="wrap" class="input">
                    <span class="radio_mark">
                        Row-reverse Nowrap
                    </span>
                </label>
                <label class="radio_wrap" data-radio="radio_3">
                    <input type="radio" name="wrap" class="input">
                    <span class="radio_mark">
                        Column Wrap-reverse
                    </span>
                </label>
                <label class="radio_wrap" data-radio="radio_4">
                    <input type="radio" name="wrap" class="input">
                    <span class="radio_mark">
                        Column Wrap
                    </span>
                </label>
            </div>

            <div class="content">

                <div class="radio_content radio_1">
                    <h3> Flex-flow: Row Wrap</h3>
                    <div class="flex-parent flex-flow-row-wrap">
                        <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> Flex-Flow Row-reverse Nowrap;</h3>
                    <div class="flex-parent flex-flow-row-reverse-nowrap">
                        <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> Flex-Flow: Column Wrap-reverse</h3>
                    <div class="flex-parent flex-flow-column-wrap-reverse">
                        <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>Flex-Flow: Column Wrap</h3>
                    <div class="flex-parent flex-flow-column-wrap">
                        <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: 750px;
  height: auto;
  padding: 30px;
  margin: 50px auto;
}
.wrapper .radio_tabs{
  height: 60px;
  background-color: #fff;
  border-radius: 5px;
  margin-bottom: 10px;
  font-size:13px;
  padding: 18px;
  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;
}

.flex-child{
  width:100px;
  line-height:100px;
  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;
}

.flex-flow-row-wrap{
  flex-flow: row wrap;
}

.flex-flow-row-reverse-nowrap{
  flex-flow: row-reverse nowrap;
}
.flex-flow-column-wrap-reverse{
  flex-flow: column wrap-reverse;
}
.flex-flow-column-wrap{
  flex-flow: column wrap;
}
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();
                });
            });

External CSS

  1. https://fonts.googleapis.com/css2?family=Exo+2:wght@300&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.