Util

# Flex

주로 많이 쓰이는 css위주, 반드시 css 하기엔 작은 것에 사용

컨테이너의 교차 축을 따라 flex 항목이 배치되는 방식을 제어하는 유틸리티입니다.

flex 주의사항

flex 를 사용한 경우 반드시 class 에 pd-flex- 를 넣어서 누가봐도 이 마크업엔 flex가 들어갔다는걸 상기시켜주세요.
flex 가 들어간 요소에 show/hide 스크립트를 하면 block 으로 인라인 스타일이
들어가 깨지므로 flex 요소 밖을 한번더 감쌉니다.
show/hide 될것을 감안해서 퍼블리싱 합니다.
class명으로 숨기고자 하면 hide, 보이고자 하면 hide를 지우시거나,
inline-flex 일 경우 flex-inline-show 를 붙입니다.


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

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

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

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

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

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

.pd-flex-show { display: flex;}
.pd-flex-inline-show { display: inline-flex;}

# Flex

flex 주의사항