whatisthis?
CSS) inline-flex (인라인 flex) 본문
display: inline-flex로 지정된 Flex Container는
Inline(Inline Block) 요소와 같은 성향(수평 쌓임)을 가진다.
.container {
display: inline-flex;
}
즉, 일반 flex는 flexbox끼리 위아래로(상하)로 쌓이지만,
inline-flex는 좌우로 쌓인다.
여기서 '쌓인다'는건 flex box ,즉 겉부분인 container를 의미함.
flex box 안에 item을 쌓는건 flex-direction속성임.
두 값의 차이는 내부에 Items에는 영향을 주지 않음.
REFERENCE
https://developer.mozilla.org/ko/docs/Web/CSS/display
display - CSS: Cascading Style Sheets | MDN
display CSS 속성은 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지와 함께, 플로우, 그리드, 플렉스처럼 자식 요소를 배치할 때 사용할 레이아웃을 설정합니다.display 속성은, 형식적으로는 요
developer.mozilla.org
https://heropy.blog/2018/11/24/css-flexible-box/
CSS Flex(Flexible Box) 완벽 가이드
많은 경우 float, inline-block, table 등의 도움을 받아서 수평 레이아웃을 구성하지만 이는 차선책이며, 우리는 Flex(Flexible Box)라는 명확한 개념(속성들)으로 레이아웃을 쉽게 구성할 수 있습니다. CSS F
heropy.blog
'WEB STUDY > HTML,CSS' 카테고리의 다른 글
| HTML 훈련 - (7) Instagram User profile (0) | 2021.11.04 |
|---|---|
| CSS) CSS Selector(선택자) (0) | 2021.11.02 |
| HTML) ARIA (Accessible Rich Internet Applications) (0) | 2021.10.30 |
| CSS) CSS position attribute (0) | 2021.10.27 |
| HTML 훈련 - (6) Product Card (0) | 2021.10.24 |
