처음 flex속성을 사용하게된건 작년에 부트스트랩 프레임워크를 이용해 테마를 만드는 작업을 하면서부터이다.
그 전까지는 스타일을 설명하는 문서만 쭉쭉 보다가 ie에서 버그가많고 지원하지않는 속성이 많다는 문구들을 보고 딱히 사용의 필요성을 못느꼈다. 진행하고 있는 프로젝트들은 무조건 ie10에서도 잘 돌아가야하니까.
부트스트랩에서 flex속성을 사용할 땐 스타일시트에 flex속성들을 직접 작성해가며 사용하진않았다.
부트스트랩은 프레임웍이고 이미 지정된 속성들이 담긴 클래스만 잘 익히면됐다.
작업후에는 의외로 ie에서도 레이아웃이 잘 나왔다.
크롬과 비교했을때 깨지는 스타일들을 서치해보면 어느정도 해결방법이 존재하는 이슈도있었고 아닌것도 있었던 것 같다.
후에 대기업의 웹사이트를 보다보니 의외로 flex속성을 사용하고있는 사이트도많았고 그 중 ie는 아예 버린 사이트들도 있었다.
해결 할 수 없는 이슈가 존재하는 flex스타일이 아니라면 앞으로 진행될 프로젝트에는 flex스타일을 사용하려한다.
그리고 ms에서 내년이면 ie지원을 완전히 중단하며, 크로미움기반의 엣지에 집중한다는 소식도있으니 미리 flex속성에대해 더 공부하면 도움이 되겠다.
flex속성을 처음 사용해보며 생각이 든 건
클래스 네이밍을 어떻게 관리하면 좋을까였다.
부트스트랩에서는 이미 클래스가 정의되어있으니 d-flex, space-between와 같이 클래스만 외워서 사용하면 괜찮았다.
별 다른 생각이 지금은 떠오르지않아 부트스트랩처럼 아래와같이 정의하여 사용했다.
.d-flex {display:flex}
.align-item-center {align-items:center}
어떤 네이밍이 간결하고 유지보수하기에 편할까?🤔
flex-grow, flex-shrink, flex-basis 등 활용해보지않은
많은 속성들이있는데 문서를 읽고 활용을 잘 해봐야겠다.
