flex 정의
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(플렉스 아이템)이라고 부릅니다.
“컨테이너가 Flex의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것”이라고 생각하시면 됩니다.
flex에 적용되는 속성
- 컨테이너에 적용되는 속성
- 아이템에 적용되는 속성
컨테이너에 적용되는 속성
display: flex;
.container {
display: flex;
/* display: inline-flex; */
}flex 아이템들은 가로 방향으로 배치되고, inline요소들 처럼 자신이 가진 내용물의 width 만큼만 차지하고 height는 컨테이너의 높이만큼 늘어남
flex-direction
아이템들이 배치되는 축의 방향을 결정하는 속성으로 “메인축의 방향을 가로로 할거냐 세로로 할거냐”를 결정
.container {
flex-direction: row;
/* flex-direction: column; */
/* flex-direction: row-reverse; */
/* flex-direction: column-reverse; */
}row (기본값)
아이템들이 행(가로) 방향으로 배치
row-reverse
아이템들이 역순으로 가로 배치
column
아이템들이 열(세로) 방향으로 배치
column-reverse
아이템들이 역순으로 세로 배치
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의 순으로 한 칸 떼고 사용
justify는 메인 축 방향으로 정렬
align은 메인 축의 수직 축 방향으로 정렬
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
아이템들의 사이와 양 끝에 균일한 간격을 만들어 줌
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;
이렇게 해주면 아이템 가운데 정렬도 가능!
아이템에 적용되는 속성
flex-basis
아이템의 기본 크기 설정 flex-direction이 row일 때는 너비, column일 때는 높이
.item {
flex-basis: auto; /* 기본값 */
/* flex-basis: 0; */
/* flex-basis: 50%; */
/* flex-basis: 300px; */
/* flex-basis: 10rem; */
/* flex-basis: content; */
}flex-basis의 값으로는 우리가 width, height 등에 사용하는 각종 단위의 수가 들어갈 수 있음
기본값 auto는 해당 아이템의 width값을 사용함 즉, width를 따로 설정하지 않으면 컨텐츠의 크기가 된다.
.item {
flex-basis: 100px;
}원래 width가 100px가 안되는 아이템의 경우는 100px을 최소로 가지게 늘어나고 원래 100px이 넘는 아이템들은 그대로 유지됨
.item {
width: 100px;
}반면 width를 설정하면, 원래 100px을 넘는 아이템들도 공통적으로 100px에 맞춰지게 됨
flex-grow
아이템이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성
기본값은 0으로 셋팅 -> 0보다 큰 값으로 바꿔주면 flexible box로 바뀌게 됨
.item {
flex-grow: 1;
/* flex-grow: 0; */ /* 기본값 */
}flex-grow에 들어가는 숫자는, 아이템들의 flex-basis를 기반으로 랜더링을 계산한 후에 남는 공간을 flex-grow에 지정된 숫자비율로 나누어 가지게 됨을 의미
flex-shrink
아이템이 flex-basis의 값보다 작아질 수 있는지를 결정
기본값이 1 -> 따로 세팅하지 않았어도 아이템이 flex-basis보다 작아질 수 있었음
.item {
flex-basis: 150px;
flex-shrink: 1; /* 기본값 */
}flex-shrink를 0으로 세팅하면 아이템의 크기가 flex-basis보다 작아지지 않기 때문에 고정폭의 컬럼을 만들 수 있고 고정 크기는 width로 설정
flex
flex-grow, flex-shrink, flex-basis를 한 번에 쓸 수 있는 축약형 속성
주의!
flex: 1; 이런 식으로 flex-basis를 생략해서 쓰면 flex-basis의 값은 0이 됨 명시적으로 모두 작성해 주는 편이 좋음
align-self
align-items의 아이템 버전
align-items가 전체 아이템의 수직축 방향 정렬이라면, align-self는 해당 아이템의 수직축 방향 정렬입니다.
.item {
align-self: auto;
/* align-self: stretch; */
/* align-self: flex-start; */
/* align-self: flex-end; */
/* align-self: center; */
/* align-self: baseline; */
}기본값은 auto로, align-items 설정을 상속받음
align-self는 align-items보다 우선권이 있고 CSS는 각각 개별적 설정을 전체의 설정보다 우선시 함
ref)
1. https://www.youtube.com/watch?v=7neASrWEFEM
2. https://studiomeal.com/archives/197
