*, html {
    box-sizing: border-box;
}

.wrapper {
    max-width: 720px;
    margin: auto;
    border: 1px solid #333;
    padding: 20px;
    box-shadow: 1px 1px 30px #000;
}

.title {
    font-size: 40px;
    text-align: center;
    border-bottom: 1px solid #9a9a9a;
    padding-bottom: 30px;
}

.description {
    font-size: 16px;
    /* width: 320px; */
    display: block;
    margin: auto;
    border-bottom: 1px solid #9a9a9a;
    padding-bottom: 30px;
}

.property {

}

.property-title {
    font-size: 25px;
    text-align: center;
}

.property-description {
    padding-left: 20px;
}

.property-description-list {

}

.property-description-list-item {

}

.property-default {
    font-weight: 700;
    text-transform: uppercase;
}
.property-default:after {
    content: '- Значение поумолчанию ';
    font-size: 12px;
    text-transform: none;
}
.property-example {
    display: flex;
    flex-direction: column;
    padding: 10px;
}
.property-example-title{
    text-align: center;
    font-size: 26px;
    border: 1px solid #9a9a9a;
}
.property-example-arena {
    padding: 10px;
    border: 1px solid #9a9a9a;
    display: flex;
}
.block {
    width: 100px;
    min-height: 100px;
    background-color: rgb(43, 149, 219);
    font-size: 32px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5px;
}

.block.high {
    min-height: 180px;
}
.block.high2 {
    min-height: 250px;
}
.block.low {
    min-height: 40px;
}

/* Для arena */

.fd_r {
    flex-direction: row;
}
.fd_r_r{
    flex-direction: row-reverse;
}
.fd_c {
    flex-direction: column;
}
.fd_c_r{
    flex-direction: column-reverse;
}

.fw_nw{
    flex-wrap: nowrap;
}
.fw_w{
    flex-wrap: wrap;
}
.fw_w_r{
    flex-wrap: wrap-reverse;
}

.jc_fs {
    justify-content: flex-start;
}
.jc_c {
    justify-content: center;
}
.jc_fe {
    justify-content: flex-end;
}
.jc_sb {
    justify-content: space-between;
}
.jc_sa {
    justify-content: space-around;
}

.ai_fs {
    align-items: flex-start;
}
.ai_c {
    align-items: center;
}
.ai_fe {
    align-items: flex-end;
}
.ai_b {
    align-items: baseline;
}
.ai_s {
    align-items: stretch;
}

.fix-height .property-example-arena{
    height: 300px;
}

.fix-very-height .property-example-arena{
    height: 700px;
}

.ac_fs{
    align-content: flex-start;
}
.ac_c{
    align-content: center;
}
.ac_fe{
    align-content: flex-end;
}
.ac_sa{
    align-content: space-around;
}
.ac_sb{
    align-content: space-between;
}
.ac_s{
    align-content: stretch;
}

.flex-wrap .property-example-arena{
    flex-wrap: wrap;
}

.block.first {
    order:-100;
}

.as_fs .block{
    align-self: flex-start;
}
.as_fe .block{
    align-self: flex-end;
}
.as_c .block{
    align-self: center;
}
.as_b .block{
    align-self: baseline;
}
.as_s .block{
    align-self: stretch;
}

.growing .block {
    width: 0;
    margin:1px;
}
.grow1 {
    flex-grow: 1;
}
.grow2 {
    flex-grow: 2;
}
.grow3 {
    flex-grow: 3;
}

.shrink1 {flex-shrink: 1;}
.shrink2 {flex-shrink: 2;}
.shrink3 {flex-shrink: 3;}

.basis1 {flex-basis: auto;}
.basis2 {flex-basis: 200px;}
.basis3 {flex-basis: 2em;}
.basis4 {flex-basis: fill;}
.basis5 {flex-basis: max-content;}
.basis6 {flex-basis: min-content;}
.basis7 {flex-basis: fit-content;}
.basis8 {flex-basis: content;}

.flex1{flex:0 0 200px}
.flex2{flex:0 0 300px}
.flex3{flex:0 1 400px}