Flex 레이아웃을 만들기 위한 기본적인 HTML 구조
<div class="container">
<div class="item">helloflex</div>
<div class="item">abc</div>
<div class="item">helloflex</div>
</div>
부모 요소인 div.container를 Flex Container(플렉스 컨테이너)라고 부르고,
자식 요소인 div.item들을 Flex Item(플렉스 아이템)이라고 부른다.
container가 Flex의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 어떠한 형태로 배치된다.
Flex의 속성들은 두가지로 나뉘는데 아래와 같다
- 컨테이너에 적용하는 속성(이번시간엔 여기까지만 정리 예정)
- 아이템에 적용하는 속성(다음편에 이어서 계속...)
Flex 컨테이너에 적용하는 속성들
Flex 컨테이너에 display: flex; 를 적용하는게 시작.
.container {
display: flex;
}기본적으로 원하는 item에 너비 만큼만 각각 확장 되어 가로 방향으로 이어 붙는다.
배치 방향 설정 flex-direction
.container {
flex-direction: row;
/* flex-direction: column; */
/* flex-direction: row-reverse; */
/* flex-direction: column-reverse; */
}row (기본값)
아이템들이 행(가로) 방향으로 배치
row-reverse
아이템들이 역순으로 가로 배치
column
아이템들이 열(세로) 방향으로 배치
column-reverse
아이템들이 역순으로 세로 배치
크기가 작은 모바일 기기에서 column으로 배치하다가 일정 폭 이상이 되면 row로 바꿔주는 식으로 반응형 레이아웃을 구현도 가능
줄넘김 처리 설정 flex-wrap
컨테이너가 더 이상 아이템들을 한 줄에 담을 여유 공간이 없을 때
아이템 줄바꿈을 어떻게 할지 결정하는 속성.
.container {
flex-wrap: nowrap;
/* flex-wrap: wrap; */
/* flex-wrap: wrap-reverse; */
}nowrap (기본값)
줄바꿈 안한다. 넘치면 그냥 삐져나옴.
wrap
줄바꿈 한다. float이나 inline-block으로 배치한 요소들과 비슷하게 동작.
wrap-reverse
줄바꿈을 하는데, 아이템을 역순으로 배치.(아래 사진 참조)
flex-flow
flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성.
flex-direction, flex-wrap의 순으로 한 칸 떼고 써주면 된다.
.container {
flex-flow: row wrap;
/* 아래의 두 줄을 줄여 쓴 것 */
/* flex-direction: row; */
/* flex-wrap: wrap; */
}
justify-content
가로 방향으로 아이템들을 정렬하는 속성.
.container {
justify-content: flex-start;
/* justify-content: flex-end; */
/* justify-content: center; */
/* justify-content: space-between; */
/* justify-content: space-around; */
/* justify-content: space-evenly; */
}flex-start (기본값)
아이템들을 시작점으로 정렬
flex-direction이 row(가로 배치)일 때는 왼쪽, column(세로 배치)일 때는 위.
flex-end
아이템들을 끝점으로 정렬.
flex-direction이 row(가로 배치)일 때는 오른쪽, column(세로 배치)일 때는 아래예요.
center
아이템들을 가운데로 정렬
space-between
아이템들의 “사이(between)”에 균일한 간격을 만들기
space-around
아이템들의 “둘레(around)”에 균일한 간격을 만들기
space-evenly
아이템들의 사이와 양 끝에 균일한 간격을 만들기
between, around, evenly 차이(↓)
align-items
수직축 방향으로 아이템을들 정렬하는 속성.
.container {
align-items: stretch;
/* align-items: flex-start; */
/* align-items: flex-end; */
/* align-items: center; */
/* align-items: baseline; */
}stretch (기본값)
아이템들이 수직축 방향으로 끝까지 쭈욱 늘어납니다.
flex-start
아이템들을 시작점으로 정렬
flex-direction이 row(가로 배치)일 때는 위, column(세로 배치)일 때는 왼쪽.
flex-end
아이템들을 끝으로 정렬
flex-direction이 row(가로 배치)일 때는 아래, column(세로 배치)일 때는 오른쪽.
center
아이템들을 가운데로 정렬.
baseline
아이템들을 텍스트 베이스라인 기준으로 정렬.
아래처럼 사용 시 아이템을 화면 정중앙에 배치.
{
justify-content: center;
align-item: center;
}
align-content
flex-wrap: wrap;이 설정된 상태에서, 아이템들의 행이 2줄 이상 되었을 때의 수직축 방향 정렬을 결정하는 속성.
.container {
flex-wrap: wrap;
align-content: stretch;
/* align-content: flex-start; */
/* align-content: flex-end; */
/* align-content: center; */
/* align-content: space-between; */
/* align-content: space-around; */
/* align-content: space-evenly; */
}justify-content랑 align-items와 내용이 거의 같음(수직방향이라 생각하면 됨.)
여기까지 Container에 관한 속성을 정리한 내용이다.
flex 아이템에 적용하는 속성을 다음시간에 정리해보자.
