[CSS] CSS flex 정리
by 한만섭
Flexbox란?
기존 콘텐츠를 수평으로 배치할 때 float 혹은 inline-block 로 마크업할 때의 불편함이 존재했는데 이를 쉽게 해결할 수 있도록 추가된 기능입니다.
Flex는 컨텐츠들을 감싸는 Flex Container 와 각 컨텐츠들인 Flex Item으로 구성되어있어 원하는 곳에 적절한 속성을 부여해서 사용할 수 있습니다.
Flexbox 지원 범위
새로나온 속성이기에 브라우저 지원 범위를 확인하고 사용해야합니다.
IE는 9버전 이하는 지원을 하지 않으며, 10,11에서도 버그가 존재합니다. 모바일 웹에서는 지원을 잘해주고 있습니다. 서비스가 어떤 브라우저까지 지원하는지에 따라 적절하게 사용하면 될 것 같습니다.
역시 구 IE는 정상적으로 지원하지 않습니다. 하지만 모바일 웹에서는 지원을 잘해주고 있습니다.
Flex Container
| 속성 | 용도 |
|---|---|
| display | Flex Container로 만들기 위함. |
| flex-direction | flex item의 주축 방향 선언 |
| flex-wrap | flex item의 줄바꿈 선언 |
| flex-flow | flex-direction과 flex-wrap 축약 속성 |
| justify-content | 주축 정렬 방법 |
| Align-content | 교차축 줄(line) 정렬 방법 |
| align-items | 교차축 컨텐츠 정렬 방법 |
display
| 값 | 의미 |
|---|---|
| flex | Block 엘리먼트인 Flex Container |
| inline-flex | inline 엘리먼트인 Flex Container |
flex-flow
flex-direction과 flex-wrap은 함께 자주 사용하는 속성이기 때문에 flex-flow속성 하나로 축약해서 사용할 수 있습니다.
.flex-container {
display : flex;
flex-direction : column;
flex-wrap : wrap;
}
.flex-container {
display : flex;
flex-flow : column wrap;
}
justify-content
flex-item의 주축 정렬 방법을 정할 수 있습니다. justify-content는 flex-item들이 주축인 수평방향에서 좌측 정렬,우측 정렬, 가운데 정렬 등 여러 정렬 방법에 대해 정할 수 있는 속성입니다.주축의 방향은 flex-direction의 값에 따라 변한다는 것입니다.
| flex-direction 값 | 주축 방향 |
|---|---|
| row (default) | 행 (수평) |
| column | 열 (수직) |
align-content , align-items
align-items : justify-content와 반대로 교차 축의 정렬 방법 설정
align-content : Flex Container의 flex Item들이 두줄 이상으로 배치되어있을 경우에 각 줄을 어떻게 배치할 것인지 설정. flex item이 한줄로 배치되어 있을 경우 동작 안함.
위 이미지를 보면 align-content와 align-items의 차이점을 확인할 수 있습니다.
단, 컨텐츠가 한줄일 경우 align-content와align-items는 동일하게 동작합니다.
Flex item
| 속성 | 용도 |
|---|---|
| order | Flex Item 순서 설정 |
| flex-grow | Flex Item 너비 증가 비율 설정 |
| flex-shrink | Flex Item 너비 감소 비율 설정 |
| flex-basis | Flex Item 기본 너비 설정 |
| flex | flex-grow, flex-shrink, flex-basis 축약형 |
| align-self | 교차 축의 item 정렬 방법 설정 |
flex-grow
Flex Item의 너비 증가 비율을 정하는 속성입니다.
기본 값은 0으로 Flex Container의 너비가 Flex Item의 너비보다 커도 Flex Item은 커지지 않습니다.
0보다 큰 값이 들어올 경우 다른 Flex Item과 비율을 나눠서 증가합니다.
.flex_container {
display : flex;
}
.flex_item1 {
flex-grow : 1;
}
.flex_item2 {
flex-grow : 2;
}
위와 같을 경우 flex_container의 크기를 키우면 flex_item2과 flex_item1은 2:1비율로 너비가 증가하게 됩니다.
주의해야할 점은 다른 flex_item에 따라 상대적이라는 것 입니다.
flex-shrink
Flex Item의 너비 감소 비율을 정하는 속성입니다.
기본 값은 1으로 Flex Container의 너비가 Flex Item의 너비보다 작아지면 Flex Item의 너비는 그에 맞게 작아집니다.
0일 경우 Flex Container의 크기가 자신보다 작아져도 너비는 줄어들지 않습니다.
flex-grow속성과 마찬가지로 다른 flex item들의 flex-shrink 값에 따라 감소 비율이 정해지게 됩니다.
flex-basis
Flex Item의 기본 너비를 설정하는 속성입니다. 이 속성을 정의하면 flex-shrink속성도 기본 값으로 정의 됩니다. flex Container의 크기가 flex Item들의 크기보다 작아졌을 경우 서로 같은 비율로 작아지게 하기 위해서 입니다.
flex
flex-grow,flex-shrink,flex-basis를 축약한 속성입니다.
.flex_item {
flex : {flex-grow} {flex-shrink} {flex-basis};
flex : 0 1 auto;/* default */
}
flex-grow를 제외한 속성은 생략가능합니다.
.flex_item {
flex : 1;
}
/* 아래와 동일 */
.flex_item {
flex-grow : 1;
}
위 처럼 축약형으로 작성할 때 flex-basis값을 생략하면 auto가 아닌 0 이 적용되는데 이 점 주의해야합니다.
Subscribe via RSS