플렉스 박스 레이아웃을 만들려면 먼저 웹 콘텐츠를 플렉스 컨테이너로 묶어주어야 합니다. 즉, 배치하려는 웹 요소들이 있다면 그 요소들을 감싸는 부모 요소를 만들고 그 부모 요소를 플렉스 컨테이너로 만들어야 합니다. 이때 특정 요소가 플렉스 컨테이너로 동작하려면 display 속성을 이용해 플렉스 박스 형태를 지정해야합니다.
기본형
display : flex | inline-flex
- flex : 박스를 블록 레벨 요소로 정합니다.
- inline-flex : 박스를 인라인 레벨 요소로 정합니다.
display: flex
컨테이너와 아이템들이 있는 아래 코드에서..
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>
.container {
padding: 8px;
background-color: #1e1e1e;
}
.item {
margin: 8px;
padding: 16px;
background-color: #b5cea8;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
flex로 요소를 배열하고 싶을 때 container에 display:flex를 추가합니다.
display: flex를 추가하는 것만으로 배열이 바뀝니다.
.container {
padding: 8px;
background-color: #1e1e1e;
display: flex;
}
.item {
margin: 8px;
padding: 16px;
background-color: #b5cea8;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
컨테이너의 높이를 늘리면 아이템의 높이도 같이 변경됩니다.
.container {
height: 200px;
padding: 8px;
background-color: #1e1e1e;
display: flex;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
display: inline-flex;
flex 대신 inline-flex를 사용하면 가로폭이 내용에 맞게 줄어듭니다.
.container {
height: 200px;
padding: 8px;
background-color: #1e1e1e;
display: inline-flex;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.