@charset "utf-8";

.item{
    background: #0bd;
    color: #fff;
    margin: 10px;
    padding: 10px;
}

.container{
    display: flex;  /* 横並び */
    border: solid 1px #000;
    width: 400px;
}

.fld-rr{
    flex-direction: row-reverse;   /*逆順（右から左）  */
}

.fld-c{
    flex-direction: column;    /* 上から下 */
}

.flw-nw{
    flex-wrap: nowrap;    /* 折り返しなし */
}

.flw-w{
    flex-wrap: wrap;    /*  折り返しし、複数行に上から下へ。*/
}

.jc-fs{
    justify-content: flex-start;    /* 左揃え　（初期値） */
}

.jc-fe{
    justify-content: flex-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;   /* align-itemsは高さを設定しないといけない */
}

.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;    /*  上下にある要素も含めて均等*/
}



/*  */