flex
: flex container(부모 요소)가 block 요소
- 부모 요소가 한 줄을 차지하고, 다음 부모 요소는 그 아래에 배치
- 부모 컨테이너의 크기에 맞게 자동으로 확장되어 가로로 채워진다.
- 컨테이너 안의 자식 요소들이 반응형으로 동작 ⭕
inline-flex
: flex container(부모 요소)가 inline 요소
- 부모 요소가 다른 인라인 요소와 같은 줄에 배치
- 부모 컨테이너의 크기에 맞게 자동으로 확장되지만, flex와 달리 한 줄을 차지하지 않는다는 점에서 차이가 있다.
- 컨테이너 안의 자식 요소들이 반응형으로 동작하지 않음 ❌
See the Pen iiinlineflexxx by nadia kwon (@nadia-kwon) on CodePen.
참고
display - CSS: Cascading Style Sheets | MDN
The display CSS property sets whether an element is treated as a block or inline box and the layout used for its children, such as flow layout, grid or flex.
developer.mozilla.org
CSS display: flex 그리고 inline-flex
인터넷 익스플로러도 망한 마당에 이제 HTML의 블록 요소들의 배치가 좀 더 자유로워졌습니다. display: flex; 에 의해서 가능해진 것입니다. 이제 flex(플렉스) 정렬 방법에 의해서 간격이든, 가로 정
rgy0409.tistory.com