display : flex
- 요소를 통해 레이아웃 구성시 별다른 사이즈, 크기, 정렬을 지정하지 않아도 유연하게 처리하는 속성
- item (내부요소)을 감싸는 요소의 형식을 flex로 변경함
- item에 자동으로 지정된 margin 요소가 모두 사라지고 content 영역 만큼의 크기만 가지게 됨
- item에 별도에 높이, 너비가 지정되어 있지 않다면 item의 높이는 flex-container의 높이/너비와 같아지게 됨 (flex-container 정렬 방향에 따라 다름)
flexbox
- 요소의 정렬되는 방향, 순서, 요소간의 간격을 수치적으로 처리하지 않아도 알아서 유연하게 처리해주는 형식
flexbox 이용할 때 알아야 하는 것
- flexbox의 구성
- flex-container : 정렬이 필요한 요소들을 감싸는 요소
- item : 정렬을 적용할 요소
- flex-container와 item에 사용되는 flex관련 css 속성이 나누어져 있다
- flexbox의 축
- 중심축 (가로축. main axis)
- 교차축 (세로축, cross axis)
선택자{
display : flex;
}
justify-content
- 요소들을 가로선상 (중심축) 에서 정렬하도록 도와주는 속성
- flex-start(기본값) : 중심축 시작 지점을 기준으로 정렬함
- flex-end : 중심축 끝 지점을 정렬함
- center : 중심축 가운데 정렬
- space-around : 내용 주위에 중심축 방향 양쪽으로 일정한 크기에 공간 추가
- space-evenly : 내용이 중심축 내에서 동일한 간격을 가지게 됨
- space-between : space-enenly에서 양 끝을 flex-container에 붙게함
선택자{
justify-content : flex-start/flex-end/center/space-between/space-enely/space-around;
}
flex-direction
- flex-container 전용 속성 / 중심축의 방향과 시작위치를 지정해주는 속성
- flex 요소들의 정렬 방향 지정 9행, 열단위)
- row : 행 방향과 동일하게(가로기준 정렬, 기본값)
- row-reverse : 가로 그대로, 순서만 반대
- column : 열 방향을 세로로 정렬
- column-reverse : 열 방향 세로, 순서만 반대
선택자 {
flex-direction : row /row-reverse/column/column-reverse
}
align-items
- 요소들을 세로선상 (교차축) 에서 정렬하도록 도와주는 속성
- stretch (기본값) : item의 너비 또는 높이를 교차축 방향으로 늘려서 flex-container와 같은 크기를 가지도록 함
- flex-start : 교차축 시작 저점을 기준(stretch처럼 늘어나지는 않고 content의 크기 유지)
- flex-end : 교차축 끝부분을 기준
- center : 교차축 가운데 기준
- baseline : item 내부 content가 모두 한줄에 배치될 수 있도록 item 요소를 교차축 기준으로 운직이는 설정
선택자{
align-items: flex-start/flex-end/center/baseline/stretch
}
order
- 특정 요소만 정렬 순서를 바꿔주는 속성
- flex container 내부의 item의 순서를 지정 / 숫자 높을수록 마지막에 위치(기본값0, 정수, 양수/음수 가능)
선택자{
order : 숫자(기본값0)
}
align-self
- 각각의 item별로 교차축 방향으로 정렬을 지정하는 속성 (값은 align-items과 동일, 기본값은 flex-start)
flex-wrap
- 요소들을 한줄로 정렬할지 여러줄로 정렬할지 정하는 속성
- nowrap : 한줄로 정렬, 기본값 (flex-container 초과시 여러줄)
- wrap : 여러줄로 배치
- wrap-reverse : 여러줄로 배치(뒤에서부터 배치)
align-content
- 교차축 방형으로 item이 포장된 라인을 정렬하는 방법
- 조건 : flex-wrap 속성이 wrap이거나 wrap-reverse일 때만 가능
- 속성값은 justify-content와 동일
flex-flow
- 중심축의 방향, 순서와 여러줄로 배치할지에 대한 여부를 한번에 지정 (flex-direction+flex-wrap)
- row-reverse wrap
flex-grow(팽창)
- item이 flex-container 내부에서 비어있는 공간을 매꿀 수 있도록 팽창하는 정도를 지정 - 지정된 비율에 맞게 팽창
- 기본값 0 : 팽창x
flex-shrink(수축)
- item이 수축하는 정도를 지정하는 속성 (기본값 1)
flex-basis
- item의 중심축 방향으로의 기본 점유율(크기)을 지정하는 속성
- px, %, vh, em 등 각종 크기단위 사용 가능
