[class*="flex-"] { display: flex; max-width: 100%; word-break: keep-all;}
.flex-inline { display: inline-flex;}
.flex-col { flex-direction: column;}
.flex-col-reverse { flex-direction: column-reverse;}
.flex-row { flex-direction: row !important;}
.flex-row-reverse { flex-direction: row-reverse;}
.flex-fix { flex: 0 0 fit-content;}
.flex-1 { flex: 1 1 0%;}
.flex-auto { flex: 0 0 auto;}
.flex-wrap { flex-wrap: wrap;}
.flex-wrap-reverse { flex-wrap: wrap-reverse;}
.flex-nowrap { flex-wrap: nowrap;}
.flex-none { flex: none;}
/* Justify Content */
.space-between { justify-content: space-between;}
.space-around { justify-content: space-around;}
.justify-center { justify-content: center;}
.flex-end { justify-content: flex-end;}
.flex-start { justify-content: flex-start;}

/* align Content */
.align-content-center { align-content: center;}
.align-content-start { align-content: flex-start;}
.align-content-end { align-content: flex-end;}
.align-content-between { align-content: space-between;}
.align-content-around { align-content: space-around;}

/* align items */
.align-center { align-items: center;}
.align-end { align-items: flex-end;}
.align-start { align-items: flex-start;}

.flex-all-center { justify-content: center; align-items: center; text-align: center;}

.flex-shrink-0 { flex-shrink: 0 !important;}

/* Gap */
.gap1 { gap: 1px;}
    ... 1 ~ 100px 까지 되어 있다.