display: inline-flex에 대해서 알아보자

부모요소를 display: flex로 하위 자식애들을 정렬하고 있었는데,

<p>
  <span><img /></span>
  <span><img /></span>
</p>

 
p태그 안에 각각의 이미지 width가 달라서 transform:translate로 관리를 하려고 했지만 먹히지 않았다.
p태그가 display:flex로 되어있어서 안되는건가? 싶어서
왜 transform속성이 안먹히는지 계속 찾아봤는데
display: inline-flex라는 속성을 처음(...) 알게 되었다.
 

그래서 display: inline-flex 속성이 뭐임?

display: inline-flex는 인라인 플렉스 컨테이너로 설정하는 속성이다.
display:flex 와 display:inline-flex와 차이점은 유사하지만 inline-flex는 인라인의 플렉스로 설정한다.
인라인 요소처럼 작동하고 주변 텍스트나 다른 인라인 요소들과 같은 줄에 위치할 수 있다.
필요한 만큼의 공간만 차지하고, 다른 인라인 요소들과 같은 줄에 있을 수 있다. 
 
말이 어려운데 즉, 부모요소가 인라인 블록요소 속성이 되어서
바로 이어지는 또 다른 컨테이너에서도 inline-flex가 있으면 서로 가로로 배치가 됨
 
얘 단점은 자식 요소들이 반응형으로 동작하지 않아서 반응형 웹사이트를 만들때는 잘 쓰지 않는 속성임
결국 span태그에 inline-flex 속성을 줘서 해결

.sun {
  display: inline-flex;
  transform: translateY(6px);
}