@charset "utf-8";

.container{
    display: flex;
    flex-direction: row;
    border: solid 1px;
    width: 400px;
}
.item{
    background: #0bd;
    color: #fff;
    margin: 10px;
    padding: 10px;
}
.fld-rr{
    flex-direction: row-reverse;
}
.jld-c{
    flex-direction: column;
}
.flw-nw{
    flex-wrap: nowrap;
}
.flw-w{
    flex-wrap: wrap;
}
.jc-fs{
    justify-content: flex-start;
}
.jc-fe{
    justify-content: end;
}
.jc-c{
    justify-content: center;
}
.jc-sb{
    justify-content: space-between;
}
.jc-sa{
    justify-content: space-around;
}
.ai-s{
    align-items: stretch;
}
.ai-fs{
    align-items: flex-start;
}
.ai-fe{
    align-items: flex-end;
}
.ai-c{
    align-items: center;
}
.ai-b{
    align-items: baseline;
}
.ht{
    height: 300px;
}
.item-1{
    font-size: 30px;
    height: 30px;
}
.item-2{
    font-size: 10px;
    height: 50px;
}
.item-3{
    font-size: 40px;
    height: 40px;
}
.item-4{
    font-size: 20px;
    height: 30px;
}
.ac-s{
    flex-wrap: wrap;
    align-content: stretch;
}
.ac-fs{
    flex-wrap: wrap;
    align-content: flex-start;
}
.ac-fe{
    flex-wrap: wrap;
    align-content: flex-end;
}
.ac-c{
    flex-wrap: wrap;
    align-content: center;
}
.ac-sb{
    flex-wrap: wrap;
    align-content: space-between;
}
.ac-sa{
    flex-wrap: wrap;
    align-content: space-around;
}