[Frontend/HTML] Block을 대체하는 Flex 박스

기존에 사용하던 CSS에서 어떤 부분을 대체할 수 있을까?

열심히 사용을 해본 결과, display 와 float 를 사용하여 정렬하던 부분만을 대체할 수 있다고 보시면 될 것 같습니다! position: absolute 를 사용한 스타일링을 대체할 수는 없다는 점이 조금 아쉽긴 합니다 ... 다음 테이블에 주로 사용되는 스타일을 정리해 보았습니다.

 

No	기존 스타일	Flex 스타일	목적
1	display: block	display: flex	한줄 차지하는 블록
2	display: inline-block	display: inline-flex	크기에 맞는 블록
3	.parent {   display: block; } .child {   float: left; } .child:after {   content: '';   display: block;   clear: both; }	.parent {   display: flex; }	가로 : 왼쪽 정렬
4	.parent {   display: block; } .child {   float: right; } .child:after {   content: '';   display: block;   clear: both; }	.parent {   display: flex;   flex-direction: row-reverse; }	가로 : 오른쪽 정렬 (역순)
5	.parent {   display: block; } .child {   display: block; }	.parent {   display: flex;   flex-direction: column; }	세로 : 위쪽 정렬
6	.parent {   position: relative;   display: block; } .child {   position: absolute;   top: 50%;   transform: translateY(-50%); }	.parent {   display: flex; } .child {   align-self: center; }	현재 블록의 위치만 : 세로로 가운데 정렬
7	.parent {   position: relative;   display: block; } .child {   position: absolute;   left: 50%;   transform: translateX(-50%); }	.parent {   display: flex; } .child {   justify-self: center; }	현재 블록의 위치만 : 가로로 가운데 정렬
8	.parent {   position: relative;   display: block; } .child {   position: absolute;   left: 50%;   top: 50%;   transform: translate(-50%, -50%); }	.parent {   display: flex; } .child {   justify-self: center;   align-self: center; }	현재 블록의 위치만 : 가운데 정렬
9	.parent {   display: block; } .child {   display: inline-block; }	.parent {   display: flex; } .child {}	내부에 있는 내용에 딱 맞게 공간 지정
10	불가능	.parent {   display: flex; } .child:nth-child(2) {   flex: 1 auto; }	특정 블록만 남은 공간 전부차지

 

---

사용시 주의사항

개인적으로 사용하는 팁입니다. display: flex | inline-flex 바로 하위에 있는 flex: 1 auto 와 같은 설정을 할 수 있는 태그들은 절대 margin을 사용하지 말아주세요! 전체적인 간격을 할당하고 싶은 경우에 전체 padding 정도만 사용해주세요. flex 영향을 받는 태그들은 모두 다닥다닥 붙여서 구조를 나눈 다음에 그 내부에서 margin 을 주시는 것을 추천합니다!