📍플렉스 박스 레이아웃
플렉스 박스 레이아웃 (flex box layout)이란 그리드 레이아웃을 기본으로 해 플렉스 박스를 원하는 위치에 배치하는 것이다.
플렉스 박스 레이아웃을 이용하면 여유 공간에 따라 너비나 높이, 위치를 자유롭게 변경할 수 있다.
플렉스 컨테이너
▪️ 웹 문서에 텍스트나 이미지, 표 등 웹 요소들을 플렉스하게 사용하려면 먼저 플렉스 컨테이너로 묶어야한다.
플렉스 항목
▪️ 플렉스 컨테이너에 담기는 웹 요소이다.
주축
▪️ 플렉스 컨테이너 안에서 플렉스 항목을 배치하는 기본 방향이다.
▪️ 주축에서 플렉스 항목이 배치되기 시작하는 지점을 '주축 시작점', 끝나는 지점을 '주축 끝점'이라고 한다.
교차축
▪️ 교차축은 주축과 교차되는 방향이다.
▪️ 교차축에서 배치가 시작되는 지점을 '교차축 시작점', 끝나는 지점을 '교차축 끝점'이라고 한다.
사용하는 속성
display 속성 : 플렉스 컨테이너 지정하기
▪️ 플렉스 박스 레이아웃을 만들려면 먼저 웹 콘텐츠를 플렉스 컨테이너로 묶어야한다.
▪️ 배치하려는 웹 요소들이 있다면 그 요소를 감싸는 부모 요소를 만들고 그 부모 요소를 플렉스 컨테이너로 만든다.
▪️ 특정 요소가 플렉스 컨테이너로 동작하려면 display 속성을 이용하여 플렉스 박스 형태를 지정해야한다.
| 속성 값 | 설명 |
|---|---|
| flex | 플렉스 박스를 박스 레벨 요소로 정의 |
| inline-flex | 플렉스 박스를 인라인 레벨 요소로 정의 |
flex-direction 속성 : 플렉스 방향 지정하기
▪️ 플렉스 항목의 주축을 가로(row)로 할지, 세로(column)로 할지 지정한다.
| 속성 값 | 설명 |
|---|---|
| row | 주축을 가로로 교차축을 세로로 지정 / 플렉스 항목은 왼쪽에서 오른쪽 배치 (기본 값) |
| row-inverse | 주축을 가로로 교차축을 세로로 지정 / 플렉스 항목은 오른쪽에서 왼쪽 배치 |
| column | 주축을 세로로 교차축을 가로로 지정 / 플렉스 항목은 왼쪽에서 오른쪽 배치 |
| column-inverse | 주축을 세로로 교차축을 가로로 지정 / 플렉스 항목은 오른쪽에서 왼쪽 배치 |
flex-wrap 속성 : 플렉스 항목을 한 줄 또는 여러 줄로 배치하기
▪️ 기본적으로 플렉스 항목들은 주축 방향을 따라 한 줄로 배치한다.
▪️ flex-wrap 속성을 이용하여 여러 줄로 배치할 수 있다.
| 속성 값 | 설명 |
|---|---|
| no-wrap | 플렉스 항목들을 한 줄에 표시 (기본 값) |
| wrap | 플렉스 항목을 여러 줄에 표시 |
| wrap-reverse | 플렉스 항목을 여러 줄에 표시하되 기존 방향과 반대로 배치 |
/* flex-wrap을 지정하지 않을 때 */
<style>
#container {
width:500px;
height:300px;
margin:0 auto;
display:flex;
border:2px solid black;
}
#container div {
width:200px;
border: 2px solid black;
background:#ccc;
}
h2 {
font-size:20px;
font-weight:bold;
padding:20px;
}
</style>
</head><body><div id="container"><div id="box1"><h2>1</h2></div><div id="box2"><h2>2</h2></div><div id="box3"><h2>3</h2></div></div></body>
/* flex-wrap을 지정했을 때 */
<style>
#container {
width: 500px;
height: 300px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
border: 2px solid black;
}
#container div {
width:200px;
border: 2px solid black;
background:#ccc;
}
h2 {
font-size:20px;
font-weight:bold;
padding:20px;
}
</style></head>
<body><div id="container"><div id="box1"><h2>1</h2></div><div id="box2"><h2>2</h2></div><div id="box3"><h2>3</h2></div></div></body>
flex-flow 속성 : 플렉스 방향과 여러 줄의 배치를 한꺼번에 지정하기
▪️ 플렉스 박스를 이용해 항목들을 배치할 때 기본이 되는 방향과 여러 줄 배치 여부는 flex-flow로 한 번에 지정할 수 있다.
▪️ 이때 플렉스 배치 방향과 여러 줄의 배치 방법을 공백 문자로 구분해 표시한다.
flex-flow: <플렉스 방향> <플렉스 줄 배치>order 속성 : 플렉스 항목의 배치 순서 바꾸기
▪️ 플렉스 항목은 소스 코드에서 입력한 순서대로 주축을 따라 배치되지만 order 속성으로 배치 순서를 바꿀 수 있다.
▪️ order 값이 0이라면 소스에 입력한 순서대로 배치되고 order 값을 숫자로 하면 그 순서에 따라 배치된다.
▪️ order 속성은 플렉스 컨테이너가 아닌 플렉스 항목에서 지정해야한다.
flex 속성 : 플렉스 항목 크기 조절하기
| 속성 값 | 설명 |
|---|---|
| flex-grow | 플렉스 항목의 너비를 얼마나 늘릴지 숫자로 지정 |
| flex-shrink | 플렉스 항목의 너비를 얼마나 줄일지 숫자로 지정 |
| flex-basis | 플렉스 항목의 기본 크기 지정 width 속성처럼 너비 값을 지정할 수도 있고 0이나 auto를 지정할 수도 있음 |
| auto | 항목의 width/height 값에 의해 크기가 결정되지만 플렉스 컨테이너의 공간에 따라 늘이거나 줄인다. |
| initial | 항목의 width/height 값에 의해 크기가 결정되는데 플렉스 컨테이너의 공간이 부족할 경우, 최소 크기까지 줄임 |
flex: [<flex-grow> <flex-shrink> <flex-basis>] | auto | initial▪️ flex-grow, flex-shrink, flex-basis 속성은 flex 속성으로 묶어 사용하는 걸 권장하고 있다.
플렉스 박스 항목 배치를 위한 속성
justify-content 속성 : 주축 기준의 배치 방법 지정하기
| 속성 값 | 설명 |
|---|---|
| flex-start | 주축의 시작점을 기준으로 배치 |
| flex-end | 주축의 끝점을 기준으로 배치 |
| center | 주축의 중앙을 기준으로 배치 |
| space-between | 양 끝점을 맞춰 배치 후 중앙 항목들을 같은 간격으로 배치 |
| space-around | 모든 플렉스 항목들을 같은 간격으로 배치 |
align-items , align-self 속성 : 교차축 기준의 배치 방법 지정하기
| 속성 값 | 설명 |
|---|---|
| stretch | 플렉스 항목을 확장해 교차축을 꽉 채움 (기본 값) |
| flex-start | 교차축의 시작점을 기준으로 배치 |
| flex-end | 교차축의 끝점을 기준으로 배치 |
| center | 교차축의 중앙을 기준으로 배치 |
| baseline | 시작점과 글자 기준선이 가장 먼 플렉스 항목을 시작점에 배치 글자의 기준선과 다른 항목의 기준선을 맞추어 배치 |
▪️ align-self 속성을 이용하면 플렉스 항목을 개별적으로 배치할 수 있다.
▪️ 플렉스 항목 자체의 스타일로 지정한다.
▪️ align-self 속성 값은 auto가 추가된다. (플렉스 항목의 부모 속성 값을 상속 받는다.)
align-content 속성 : 여러 줄일 때 배치 방법 지정하기
▪️ align-content 속성 값은 justify-content 속성 값과 동일하다.
▪️ 플렉스 항목이 여러 줄에 걸쳐 표시될 때 교차축 방향의 배치 방법을 지정할 수 있다.
✏️
container에 지정되는 속성
▪️ display
▪️ flex-direction
▪️ flex-wrap
▪️ flex-flow
▪️ justify-content
▪️ align-items
▪️ align-content
item에 지정되는 속성
▪️ order
▪️ flex-grow
▪️ flex-shrink
▪️ flex
▪️ align-self
