.container {
display: flex;
/* display: inline-flex; */
}inline-flex
: 아이템의 배치보다는 주변 요소들과 어떻게 어우러질지 결정하는 값
아이템들이 배치된 방향의 축을 메인축 (Main Axios)
메인축과 수직인 축을 수직축 or 교차축이라 부름
배치 방향 설정
flex-direction
.container {
flex-direction: row;
/* flex-direction: column; */
/* flex-direction: row-reverse; */
/* flex-direction: column-reverse; */
}row
아이템들이 가로로 배치됨
column
아이템들이 세로로 배치됨
row-reverse
아이템들이 역순으로 가로 배치됨
column-reverse
아이템들이 역순으로 세로 배치됨
줄넘김 처리 설정
flex-wrap
.container {
flex-wrap: nowrap;
/ flex-wrap: wrap; /
/ flex-wrap: wrap-reverse; /
}
nowrap
:줄바꿈하지않고 넘치면 밖으로 삐쳐나옴
wrap
:줄바꿈을 합니다. float이나 inline-block으로 배치한 요소들과 비슷하게 동작함
wrap-reverse
:줄바꿈을 하는데, 아이템을 역순으로 배치함
flex-flow
.container {
flex-flow: row wrap;
/* 아래의 두 줄을 줄여 쓴 것 */
/* flex-direction: row; */
/* flex-wrap: 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
: 아이템사이에 일정한 간격을 만들어줌
space-around
: 아이템들의 “둘레(around)”에 균일한 간격을 만들어 준다.
space-evenly
: 아이템들의 사이와 양 끝에 균일한 간격을 만들어 줍니다.
주의! IE와 엣지(Edge)에서는 지원되지 않음
수직축 방향 정렬
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(세로 배치)일 때는 왼쪽이에요.
center
:아이템들을 가운데로 정렬합니다.
baseline
:아이템들을 텍스트 베이스라인 기준으로 정렬합니다.
유연한 박스의 기본 영역
flex-basis
flex-basis는 Flex 아이템의 기본 크기를 설정한다.
.item {
flex-basis: auto; /* 기본값 */
/* flex-basis: 0; */
/* flex-basis: 50%; */
/* flex-basis: 300px; */
/* flex-basis: 10rem; */
/* flex-basis: content; */
}.item {
flex-basis: 100px;
}
-> 이코드에서 width가 100px이 안되는 요소는 100px로 100px보다 큰 요소는 width가 그대로 유지됨
유연하게 늘리기
flex-grow
flex-grow는 아이템이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성 (비율을 결정)
.item {
flex-grow: 1;
/* flex-grow: 0; */ /* 기본값 */
}
유연하게 줄이기
flex-shrink
flex-shrink는 flex-grow와 쌍을 이루는 속성으로, 아이템이 flex-basis의 값보다 작아질 수 있는지를 결정
.item {
flex-basis: 150px;
flex-shrink: 1; /* 기본값 */
}
flex-shrink를 0으로 세팅하면 아이템의 크기가 flex-basis보다 작아지지 않기 때문에 고정폭의 컬럼을 쉽게 만들 수 있음. 고정 크기는 width로 설정합니다.
