autoprefixer: start value has mixed support, consider using flex-start instead

just release it 프로젝트 코드 구현을 하면서 github actions에 배포를 하는데. 항상 그렇듯 로컬에서는 문제가 없지만 액션이 실패했습니다.

ci 실패

 

예외 메시지가 친절하게 나와 있어서 해결에는 어려움이 없지만 autoprefixer가 하는 역할에 대해서 조사를 해봤습니다.

 

autoprefixer는 css를 브라우저 간 호환성을 높이기 위해 자동으로 조정해주는 도구로 display: flex를 사용할 때 사용되는 aligh-items, justify-content가 브라우저 호환이 좋지 못할 때 warning 메시지를 내보내줍니다.

 

예를 들어 아래와 같은 css 코드가 있다고 할 때

.container {
  display: flex;
  align-items: start; /* 이 부분이 문제를 일으킴 */
}

 

위 코드에서 align-items: start를  align-items: flex-start로 변경하여 오류를 해결할 수 있습니다.

.container {
  display: flex;
  align-items: flex-start; /* 수정됨 */
}

 

flex를 사용할 때 속성 값을 바꿔보면서 되는 것들 위주로 사용했었는데요. 이제는 flex-start, flex-end와 같이 더 호환성이 좋은 옵션들을 사용할 수 있도록 노력해야할 것 같습니다.