flex와 inline-flex의 차이

차이

flex를 2개 사용할때 차이를 알수있다

flex를 사용한 경우

아래의 경우 div가 상하로 쌓인다 (wrapper를 block처리)

<div style="display:flex">1</div>
<div style="display:flex">2</div>

inline-flex를 사용한 경우

아래의 경우 div가 좌우로 쌓인다 (wrapper를 inline처리)

<div style="display:inline-flex">1</div>
<div style="display:inline-flex">2</div>

주의점

그러나 위와 같이 flex와 inline-flex를 사용한다고 해도 자식의 flex item에는 영향을 주지않는다

참조

소스코드

참조