# flex
flexbox는 행과 열 형태로 항목 무리를 배치하는 일차원 레이아웃 메서드입니다. 항목은 부족한 공간에 맞추기 위해 축소되거나 여분의 공간을 채우기 위해 변형된다. 이 문서는 근간이 되는 내용 전체를 설명합니다.
| flex-box | 바로가기 |
| flex 연습 사이트 | 바로가기 |
Flexbox 레이아웃은 flex item의 복수의 자식 요소와 이들을 포함하는 flex-container 부모 요소로 구성
주 축(main-axis) : 기준축 / 교차 축(cross-axis) : 교차축
# Flex Container
| 속성 | 설명 |
| display | Flex Container를 정의 |
| flex-flow | flex-direction와 flex-wrap의 단축 속성 |
| flex-direction | Flex Items의 주축를 설정 |
| flex-wrap | Flex Items의 여러 줄 묶음( 줄 바꿈 ) 설정 |
| justify-content | 주 축의 정렬 방법을 설정 |
| align-content | 교차축의 정렬 방법을 설정 ( 여러줄 ) |
| align-items | 교추축의 정렬 방법을 설정 ( 한줄 ) |
1. display :flex , inline-flex
.container {
display: flex;
}
.container {
display: inline-flex;
}
2. flex-direction
| 값 | 설명 |
| row | items를 수평 ( 왼쪽에서 오른쪽 ) 으로 표시 ( 기본 ) |
| row-reverse | items를 row를 반대 축으로 표시 |
| column | items를 수직 ( 위에서 아래 )로 표시 |
| column-reverse | items를 column의 반대축으로 표시 |
flex-direction:row
flex-direction:row-reverse
flex-direction:column
flex-direction:column-reverse
3. flex-wrap : Items의 여러 줄 묶음(줄 바꿈)을 설정 - 영역이 넘치면 아래로 내려감
나열하려고 하는 부모에 설정함
| 속성 | 설명 |
| nowrap | 모든 items를 한줄로 표시 ( 기본 ) |
| wrap | items를 여러줄로 표시 |
| wrap-reverse | items를 wrap의 역 방향으로 여러줄 표시 |
flex-wrap:nowrap
flex-wrap:wrap
flex-wrap:wrap-reverse
flex-flow
.parent {
flex-flow: row nowrap /* default */
or <flex-direction> <flex-wrap>
or <flex-direction>
or <flex-wrap>
}
4. justify-content : 주 축의 정렬 방법을 설정
| 속성 | 설명 |
| flex-start | items의 시작점 정렬 ( 기본 ) |
| flex-end | items의 끝점 정렬 |
| center | items의 가운데 정렬 |
| space-between | 시작 item은 시작점에, 끝 item은 마지막에 items 사이의 고르게 정렬됨 |
| space-around | items를 균등한 여백을 포함하여 정렬 |
| space-evenly | items의 여백을 동일하게 정렬 |
row 축
column
justify-content:flex-start
justify-content:flex-end
justify-content:center
justify-content:space-between
justify-content:space-around
5. align-content : 교차 축의 정렬 방법을 설정
주의할 점은 flex-wrap 속성을 통해 Items가 여러 줄(2줄 이상)이고 여백이 있을 경우만 사용
| 속성 | 설명 |
| stretch | Container의 교차 축을 채우기 위해 Items를 늘림 ( 기본 ) |
| flex-start | items를 시작점으로 정렬 |
| flex-end | items를 끝점으로 정렬 |
| center | items를 가운데 정렬 |
| space-between | 시작 item은 , 마지막 item은 정렬되고 나머지 Items는 사이에 고르게 정렬됨 |
| space-around | items를 균등한 여백을 포함하여 정렬 |
| space-evenly | items의 여백 동일하게 정렬 |
align-content:stretch
align-content:flex-start
align-content:flex-end
align-content:center
align-content:space-between
align-content:space-arund
6. align-items : 교차 축에서 Items의 정렬 방법을 설정
Items가 한 줄일 경우 많이 사용
주의할 점은 Items가 flex-wrap을 통해 여러 줄(2줄 이상) 일 경우에는 align-content 속성이 우선
| 속성 | 설명 |
| stretch | Container의 교차 축을 채우기 위해 Items를 늘림 ( 기본 ) |
| flex-start | items를 각 줄의 시작점으로 정렬 |
| flex-end | items를 각 줄의 끝점으로 정렬 |
| center | items를 가운데 정렬 |
| baseline | items를 문자 기준선에 정렬 |
.parent {
align-items: stretch /* default */
or flex-start
or flex-end
or center
or baseline
}
align-items : stetch
align-items : flex-start
align-items : flex-end
align-items : center
align-items : baseline
Child Properties
7. Flex Items를 위한 속성들
| 속성 | 설명 |
| order | Flex item의 순서를 설정 |
| flex | flex-grow , flex-shrink, flex-basis의 단축 속성 |
| flex-grow | Flex item의 증가 너비 비율을 설정 |
| flex-shrink | Flex item의 감소 너비 비율의 설정 |
| flex-basis | Flex item의 ( 공간 배분 전 ) 기본 너비의 설정 |
| align-self | 교차 축에서 item의 정렬 방법 설 |
order : Item의 순서를 설정
Item에 숫자를 지정하고 숫자가 클수록 순서가 밀림
음수/양수
.child {
order: 0 /* default */
or <number>
}
flex-grow : Item의 증가 너비 비율을 설정
숫자가 크면 더 많은 너비를 가짐
Item이 가변 너비가 아니거나, 값이 0일 경우 효과가 없음
.child {
flex-grow: 0 /* default */
or <number>
}
모든 flex item이 동일한 flex-grow 속성값을 가지면 모든 flex item은 동일한 너비
두 번째 flex item의 flex-grow 속성값을 3으로 지정하면 1/7,3/7,1/7
flex-shrink : Item이 감소하는 너비의 비율을 설정
숫자가 크면 더 많은 너비가 감소
Item이 가변 너비가 아니거나, 값이 0일 경우 효과가 없음 기본값 1
기본적으로 모든 flex item은 축소된 상태로 지정(기본값 1)하고 두번째 flex item만 축소를 해제(flex-shrink: 0;)하면 원래의 너비를 유지한다.
flex-basis : Item의 (공간 배분 전) 기본 너비를 설정
값이 auto일 경우 width, height 등의 속성으로 Item의 너비를 설정할 수 있음
하지만 단위 값이 주어질 경우 설정할 수 없음 기본 auto
.child {
flex-basis: auto /* default */
or <width>
}
8. flex : Item의 너비(증가, 감소, 기본)를 설정하는 단축 속성
| 속성 | 설명 |
| flex-grow | item의 증가 너비 비율을 설정 ( 0 ) |
| flex-shrink | item의 감소 너비 비율을 설정 ( 1 ) |
| flex-basis | item의 기본 너비 설정 ( auto ) |
flex: 증가너비 감소너비 기본너비
flex: 0 1 auto /* default */
or <flex-grow> <flex-shrink> <flex-basis>
or <flex-grow>
or <flex-basis>
or <flex-grow> <flex-basis>
or <flex-grow> <flex-shrink>
}
9. align-self : 교차 축에서 개별 Item의 정렬 방법을 설정
align-items는 Container 내 모든 Items의 정렬 방법을 설정
필요에 의해 일부 Item만 정렬 방법을 변경하려고 할 경우 align-self를 사용할 수 있
이 속성은 align-items 속성보다 우선함
| 속성 | 설명 |
| auto | Container의 align-items속성을 상속받 |
| stretch | Container의 교차 축을 채우기 위해 item을 늘림 |
| flex-start | item을 각 줄의 시작점으로 정렬 |
| flex-end | item을 각 줄의 끝점으로 정렬 |
| cneter | item의 가운데 정렬 |
| baseline | item의 문자 기준선에 정렬 |
.child {
align-self: stretch /* default */
or flex-start
or flex-end
or center
or baseline
}
# 레이아웃구조
'CSS3' 카테고리의 다른 글
| [ CSS3 ] transform / transition / animation (0) | 2023.09.06 |
|---|---|
| [ CSS3 ] position (0) | 2023.08.27 |
| [ css3 ] 선택자 , 스크롤, root , coding Convention (0) | 2023.08.24 |
| [ css3 ] 상속, 단위, 웹폰트, 컬러,둥근 사각형, 그림자 , float , 배경 (0) | 2023.08.22 |
| [ css3 ] border, font, text, display (0) | 2023.08.21 |