flex
flex Container
display, flex-flow(단축속성), flex-direction, flex-wrap, justify-content, align-content, align-items
display:flex
- flex아이템들은 가로 방향으로 배치되고, 자신이 가진 내용물의 width 만큼차지(inline요소들처럼)
height는 컨테이너의 높이만큼 늘어난다.
display:flex 와 display:inline-flex 차이
- flex : block요소와 같은 성향(수직쌓임) / inline-flex : inline요소와 같은 성향(수평쌓임)
- Container의 수직과 수평 쌓임의 차이 intes에 영향을 주지 않는다.
flex-flow (단축속성)
- flex itens의 주축을 설정하고 items의 여러 줄 묶음도 설정 가능
.flex-container {
flex-flow: row-reverse wrap;
}flex-direction
- items의 주 축 설정
flex-wrap
items의 여러 줄 묶음(줄 바꿈) 설정
- nowrap : 모든 items를 여러 줄로 묶지 않음(한줄에 표시)
- wrap : items를 여러 줄로 묶음
- wrap-reverse : items를 wrap의 역 방향으로 여러 줄로 묶음
align-content
- 교차 축 정렬 flex-wrap속성을 통해 items가 여러줄이고 여백이 있을 경우에만 사용.
- items가 한 줄일 경우 align-items 속성 사용.
- flex-wrap: wrap;이 설정된 상태에서, 아이템들의 행이 2줄 이상 되었을 때의 수직축 방향 정렬
stretch 교차 축을 채우기 위해 Items를 늘림
flex-start Items를 시작점(flex-start)으로 정렬
flex-end Items를 끝점(flex-end)으로 정렬
center Items를 가운데 정렬
space-between 시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬됨
space-around Items를 균등한 여백을 포함하여 정렬flex Items
order, flex(flex-grow,flex-shrink,flex-basis)단축속성, flex-grow, flex-shrink, flex-basis, align-self
order
- 아이템의 순서를 결정 order: 순서;
flex
- flex: 증가너비 감소너비 기본너비;
- Item의 너비(증가, 감소, 기본)를 설정하는 단축 속성
- flex : grow shrink basis
- flex-grow를 제외한 개별 속성 생략가능 : flex:1 일경우 flex-grow:1과 동일 나머지는 flex-shrink:1, flex-basis:auto;
flex-basis의 기본값은 auto 단축 속성인 flex에서 그 값을 생략할 경우 0이 적용 flex: 1; 혹은 flex: 1 1;은 flex: 1 1 0;
.item {
flex: 1 1 20px; /* 증가너비 감소너비 기본너비 */
flex: 1 1; /* 증가너비 감소너비 */
flex: 1 20px; /* 증가너비 기본너비 (단위를 사용하면 flex-basis가 적용됩니다) */
}flex-grow
- item의 증가 너비 비율 설정 숫자가 크면 더 많은 너비 가진다.
- flex-grow: 1, 2, 1 이라면 첫번째 item 은 총너비의 25% (1/4) 두번째item 은 총너비의 50% (2/4) 세번째 item 은 총너비의 25% (1/4)
- flex-grow에 들어가는 숫자의 의미는, 아이템들의 flex-basis를 제외한 여백 부분을 flex-grow에 지정된 숫자의 비율로 나누어 가진다
flex-shrink
-- item이 감소하는 너비의 비율 Item이 가변 너비가 아니거나, 값이 0일 경우 효과가 없다.
flex-basis
- Item의 (공간 배분 전) 기본 너비를 설정
- 값이 auto일 경우 width, height 등의 속성으로 Item의 너비를 설정
- flex 속성에서 설명한 것 같이 단축 속성 내에서 flex-basis를 생략하면 값이 0이 되는 것을 주의
align-self
- 교차 축(cross-axis)에서 개별 Item의 정렬 방법을 설정
- align-items는 Container 내 모든 Items의 정렬 방법을 설정
- align-items 속성보다 우선
참고: https://studiomeal.com/archives/197 / https://heropy.blog/2018/11/24/css-flexible-box/