Для начала вашей проблемой является текст.Смотрите мой пример ниже
.d-table {
display: table!important;
}
.d-table-row {
display: table-row !important;
}
.d-table-cell {
display: table-cell!important;
}
.align-middle {
vertical-align: middle!important;
}
.align-middle>div {
margin-right: 50px;
}
.flex-row {
flex-direction: row!important;
}
.d-flex {
display: inline-flex!important;
}
.d-flex {
display: inline-flex!important;
}
.RowMargin {
margin-right: 35px;
margin-bottom: 5px;
}
.flex-column-reverse {
flex-direction: column-reverse!important;
}
.CheckboxWrap {
text-align: center;
}
input[type='radio'] {
-webkit-appearance: none;
width: 13px;
height: 13px;
background: white;
border-radius: 50%!important;
border: 1px solid #343c49;
}
[type=checkbox],
[type=radio] {
box-sizing: border-box;
padding: 0;
}
.CheckboxWrap+div {
text-align: center;
}
<div class="d-table-cell align-middle">
<div class="d-flex flex-row ">
<div class="d-flex RowMargin flex-column-reverse">
<div class="CheckboxWrap">
<input type="radio" name="">
</div>
<div>
<span class="text1">1</span>
</div>
</div>
<div class="d-flex RowMargin flex-column-reverse">
<div class="CheckboxWrap">
<input type="radio" name="">
</div>
<div>
<span class="text1">2</span>
</div>
</div>
<div class="d-flex RowMargin flex-column-reverse">
<div class="CheckboxWrap">
<input type="radio" name="">
</div>
<div>
<span class="text1">3</span>
</div>
</div>
<div class="d-flex RowMargin flex-column-reverse">
<div class="CheckboxWrap">
<input type="radio" name="">
</div>
<div>
<span class="text1">4</span>
</div>
</div>
<div class="d-flex RowMargin flex-column-reverse">
<div class="CheckboxWrap">
<input type="radio" name="">
</div>
<div>
<span class="text1">5</span>
</div>
</div>
<div class="d-flex RowMargin flex-column-reverse">
<div class="CheckboxWrap">
<input type="radio" name="">
</div>
<div>
<span class="text1"><span style="font-size:75%">I can not
<br>estimate </span></span>
</div>
</div>
</div>
</div>
<br />
<div class="d-table-cell align-middle">
<div class="d-flex flex-row ">
<div class="d-flex RowMargin flex-column-reverse">
<div class="CheckboxWrap">
<input type="radio" name="">
</div>
<div>
<span class="text1">7</span>
</div>
</div>
<div class="d-flex RowMargin flex-column-reverse">
<div class="CheckboxWrap">
<input type="radio" name="">
</div>
<div>
<span class="text1">8</span>
</div>
</div>
<div class="d-flex RowMargin flex-column-reverse">
<div class="CheckboxWrap">
<input type="radio" name="">
</div>
<div>
<span class="text1">9</span>
</div>
</div>
<div class="d-flex RowMargin flex-column-reverse">
<div class="CheckboxWrap">
<input type="radio" name="">
</div>
<div>
<span class="text1">10</span>
</div>
</div>
<div class="d-flex RowMargin flex-column-reverse">
<div class="CheckboxWrap">
<input type="radio" name="">
</div>
<div>
<span class="text1">11</span>
</div>
</div>
<div class="d-flex RowMargin flex-column-reverse">
<div class="CheckboxWrap">
<input type="radio" name="">
</div>
<div>
<span class="text1">12</span>
</div>
</div>
</div>
</div>
Бит I can not estimate делает div длиннее, потому что нет фиксированного размера div.Это - блеск, но также и падение flex.
Решением может быть добавление фиксированного размера к вашему .RowMargin, например, так:
.RowMargin {
margin-right: 35px;
margin-bottom: 5px;
width: 50px;
}
Или вы можете отойти от flex ипосмотрите на сетку.
body {
margin: 40px;
}
.wrapper {
display: grid;
grid-template-columns: 10% 10% 10% 10% 10% 10%;
grid-gap: 10px;
}
.box {
background-color:blue;
color: white;
padding: 20px;
font-size: 150%;
}
<div class="wrapper">
<div class="box a">1</div>
<div class="box b">2</div>
<div class="box c">3</div>
<div class="box d">4</div>
<div class="box e">5</div>
<div class="box f">6</div>
<div class="box d">7</div>
<div class="box e">8</div>
<div class="box f">9</div>
<div class="box d">10</div>
<div class="box e">11</div>
<div class="box f">12</div>
</div>
Расположение сетки обеспечивается этой строкой: grid-template-columns: 10% 10% 10% 10% 10% 10%; Есть 6 10%, поэтому 6 полей расположены в 6 столбцах сширина 10%.
Гирд прост и очень эффективен.Однако оба имеют ограничения браузера.Смотрите здесь
Поддержка браузера css Gird | Поддержка браузера Flex
Однако оба они могут использоваться вместе с eachother:)
Дальнейшее чтение
https://gridbyexample.com/examples/
http://flexboxgrid.com/