📌Contents
- flexbox란
- flex container 속성 활용하기
- flex item 속성 활용하기
- flex-wrap & align-content
flexbox란?
= flexbox를 이용하면 요소를 쉽게 정리할 수 있으며 사용가능한 공간을 최대한 활용할 수 있도록 컨테이너에 요소를 확장하고 축소할 수 있는 기능을 제공한다. 또한 더 적은 코드와 읽기 쉬운 방법으로 float레이아웃을 대체한다.
flexbox를 만드려면 부모 요소에 display: flex 속성을 지정한다. 이 속성이 적용된 요소는 flex container가 되고, 자식 요소는 flex item이다. flex item들이 배치되는 방향을 main axis, 수직 축을 cross axis라고한다.
flexbox 속성
flex-wrap: flex container에 충분한 공간이 없는 경우 flex item의 줄바꿈 여부를 정의함.justify-content: flex item이 main axis를 따라 정렬되는 방식aligin-items: cross axis를 따라 정렬되는 방식aligin-content: 행이 1개보다 많은 경우에 적용. 빈 공간이 있는 경우 cross axis를 따라 행을 정렬하는 방법을 다룸.
flex-direction 속성
: flex-direction은 row, column외에도 row-reverse, column-reverse값을 사용할 수 있음. main axis값을 반대로 바꿈.
justify-content 속성
1) space between
: flex item 사이에 공간이 고르게 나뉨.
2) space-around
: 각 flex item의 왼쪽과 오른쪽 모두에 같은 크기의 공간을 둠. (margin이랑 느낌이 비슷함)
3) space-evenly
: space-around와 비슷하지만 요소의 측면과 item 사이 공간이 모두 같음. (중복? 겹쳐져서 1개로 보여짐.)
align-items
: align-items에서는 center, flex-start, flex-end, stretch를 특히 자주 사용함. baseline이라는 속성값도 있으며 텍스트 기준선인 baseline을 기준으로 item을 정렬해 둔다.
.container {
display: flex;
justify-content: center;
align-items: baseline;
}
.item2 {
font-size: 100px;
}
: item2의 폰트 사이즈가 변경되어도 아래 baseline에 맞춰서(아래 선에 맞춰서) 정렬되는 것을 확인할 수 있다.
flex item 속성 활용하기
align-self
: align-self는 align-items 값을 재정의 한다. grid에서는 grid area항목을 정렬하고, flexbox에서는 cross axis 항목을 정렬한다.
.container {
display: flex;
justify-content: center;
align-items: center;
}
.item2 {
font-size: 100px;
}
.item3 {
align-self: flex-end;
}
order
: order의 초기값은 0이다. 만약 요소 하나를 시작 부분으로 옮기려면 0보다 작은 값을 주면 된다. 반대로 0보다 큰 값을 준다면 마지막으로 이동한다. 세 번째 아이템에 -1을 주면 맨 앞으로 오게 된다.
-> 정렬하는 기준을(우선순위를) 지정해주는 스타일
flex-grow
: flex item의 확장과 관련된 속성으로 예를 들어 모든 item에 1이상의 값을 부여하면 아이템 각각이 가능한 전체 공간을 차지하게 된다.
.container {
display: flex;
justify-content: center;
align-items: center;
}
.item {
flex-grow: 1;
margin: 10px;
}
.item2 {
font-size: 100px;
}
flex-shrink
: flex item의 축소와 관련된 속성으로 기본값은 1이고, 공간이 더 이상 없다면 요소가 축소될 수 있게 한다. 만약 값이 0이면 item의 크기가 줄어들지 않고 유지된다.
flex-basis
: flex item의 기본 크기를 결정하는 속성으로 기본값은 auto 이다. item 각각에 width 를 지정하는 대신, flex-basis 를 이용하여 너비를 설정할 수 있다.
📌
flex: 1이란?: flex-grow, flex-shrink, flex-basis 속성은 축약하여 표현할 수 있다. 예를 들어
flex: 1 1 0은 아래와 같고, 이를 다시flex: 1로 표현할 수 있다.
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
/* flex: 1 */
}flex-wrap & align-content
: flex-wrap 은 item이 flex container를 벗어났을 때 줄을 바꿔주는 역할을 해서 반응형을 구현할 때 유용하다. 예를 들어, 아래와 같이 컨테이너에 flex-wrap: wrap, 6번째 아이템에 flex: 1을 준다면, 뷰포트에 따라 아이템이 아래로 흐르는 것을 볼 수 있다.
.container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.item6 {
flex: 1;
}
이 경우, 행이 2개로 늘어나면서 두 행 사이에 생기는 불필요한 공간을 align-contnet를 통해 정렬할 수 있다.
.container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
**align-content: center;**
}
.item6 {
flex: 1;
}