Flexible Box Module (Flexbox) 인터페이스 내 아이템 간의 공간 배분과 강력한 정렬 기능을 제공하기 위한 1차원 레이아웃 모델 1차원이라는 것은, 레이아웃을 다룰 때 한 번에 하나의 차원(행 or 열)만을 다룬다는 뜻이다.
Flex Container 문서 내에서 flexbox 가 놓여있는 영역 해당 요소에 display 값을 ‘flex’ 혹은 ‘inline-flex’ 로 지정하면 생성된다.
display : flex container 의 화면 출력 특성을 지정
flex (=block)
inline-flex (=inline)
flex-direction : 주축을 지정
row* : 행축 (좌-우)
row-reverse : 행축 (우- 좌)
column : 열 축 (위-아래 )
column-reverse : 열 축 (위-아래)
flex-wrap : flex items 요소들에 대한 줄바꿈 처리 지정
nowrap* : flex container(= flexbox)을 벗어나더라도 요소를 한 줄에 배치
wrap : flex items 요소들이 내부 로직에 의해 분할되어 여러 행으로 배치
wrap-reverse : flex items 요소가 나열되는 시작점/끝점 기준이 wrap의 반대로 배치
justify-content : 주축의 정렬 방법 지정
flex-start* : 좌측 정렬 (첫 번째 요소가 시작점에서부터 정렬)
flex-end : 우측 정렬 (마지막 요소가 끝점에서부터 정렬)
center : 중앙정렬
space-between : flex items 사이의 공간이 균등하게 배분되어 정렬
space-around : flex items 사이와 공간과, 시작점과 끝점 사이의 공간이 균등하게 배분되어 정렬
space-evenly : 여유공간을 시작점 ~ flex items ~ 끝점 사이에 균등하게 배분
align-content : 교차축 정렬 방법 지정 (flex-wrap: wap;으로 설정되어 요소가 두 줄 이상일 때)
stretch* : 교차축을 채우기 위해 요소를 늘려서 배치 (width/height = auto 인 경우)
flex-start : 첫 번째 요소가 시작점에서부터 정렬
flex-end : 마지막 요소가 끝점에서부터 정렬
center : 중앙 정렬
space-between : 첫 번째 요소는 시작점에, 마지막 요소는 끝점에 정렬되고 나머지는 균등하게 배분되어 정렬
space-around : flex items 사이와 공간과, 시작점과 끝점 사이의 공간이 균등하게 배분되어 정렬
space-evenly : 여유공간을 시작점 ~ flex items ~ 끝점 사이에 균등하게 배분
align-items : 교차축 정렬 방법 지정 (한 줄일 때)
stretch* : 교차축을 채우기 위해 요소를 늘려서 배치 (width/height = auto 인 경우)
flex-start : 첫 번째 요소가 시작점에서부터 정렬
flex-end : 마지막 요소가 끝점에서부터 정렬
center : 중앙 정렬
baseline : 요소를 문자 기준선에 맞추어 정렬
Flex Items (자식 요소에 부여하는 속성)
order : flex items 의 순서 (html 구조를 바꾸지 않고 순서 변경 가능)
0*
숫자 : 크기가 작을수록 먼저 정렬되며, 음수 허용
flex-grow : flex items 의 증가너비 비율 (container에서 요소가 가질 수 있는 공간의 정도 선언)
0*
숫자 : 숫자가 클수록 더 많은 너비를 가진다.
flex-shrink : flex items 의 감소너비 비율
1*
숫자
flex-basis : flex items의 공간 배분 전 기본 너비 (항목의 크기)
auto* (=content)
단위
<aside> 💡 flex-grow, flex-shrink, flex-basis 는 ‘ flex: ~ ; ’ 문법의 단축속성으로 사용 할 수 있다.
</aside>
flex: 증가너비 감소너비 기본너비;
.item {
flex: 1 1 20px; /* 증가너비 감소너비 기본너비 */
flex: 1 1; /* 증가너비 감소너비 기본너비=0 (auto 아님) */
flex: 1 20px; /* 증가너비 기본너비 (단위를 사용하면 flex-basis가 적용됩니다) */
}
참고
인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공하기 위한 1차원 레이아웃 모델 화면 레이아웃을 ‘유연하게’ 배치하여 다양한 레이아웃을 만들 수 있도록 고안된 기법
기본 예시 코드
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div></div>
<div id="center"></div>
<div></div>
</body>
</html>
div {
width: 200px;
height: 200px;
background-color: tomato;
}
#center {
background-color: seagreen;
}
<aside> 💡 부모-자식 관계에서, 부모태그에 적용해야 자식태그에 영향을 줄 수 있음 (부모태그를 선택자로 지정!)
</aside>
body {
display: flex;
}
div {
width: 200px;
height: 200px;
background-color: tomato;
}
#center {
background-color: seagreen;
}
자식 요소를 원하는 방향으로 유연하게 배치할 수 있는 속성