Flexbox 이전의 레이아웃 모듈
Flexbox 이전의 레이아웃 모듈로 Block, Inline, Table, Positioned 가 있었다. Flexbox는 float나 positioning을 사용하지 않고도 유연한 반응형 레이아웃 구조를 보다 쉽게 설계할 수 있다.
Flexbox Elements
Flex container를 먼저 정의한다. 그리고 Flex container의 display를 flex로 지정해주면 Flex container 안에 있는 요소들은 display를 flex로 받게 된다.
flex-direction : 컨테이너가 flex 항목을 쌓으려는 방향을 정의한다. 이 값은 default값은 row값이고, column으로 변경해서 세로로 정렬해줄 수 있다. 이 경우 위에서 아래로 정렬이 된다. 아래에서 위로 정렬하고 싶으면 column-reverse로 변경해주면 된다.
# 가로 정렬(default)
flex-direction: row;
# 가로 정렬(아래에서 위로)
flex-direction: row-reverse;
# 세로 정렬(위에서 아래로)
flex-direction: column;
# 세로 정렬(아래에서 위로)
flex-direction: column-reverse;flex-wrap : flex 항목이 wrapping 되어야 하는지 여부를 지정한다. nowrap으로 지정해주면 모든 Items를 한 줄에 표시하게 된다. wrap을 해주면 깨지지 않고 여러 줄로 생기는 것을 볼 수 있다.
# 래핑되지 않도록 지정한다(default)
flex-wrap: nowrap;
# 래핑되도록 지정한다.
flex-wrap: wrap;
# 역순으로 래핑되도록 지정한다.
flex-wrap: wrap-reverse;flex-flow : 위에서 말한 flex-direction과 flex-wrap를 한 번에 설정할 수 있다.
.class-name{
flex-flow: column wrap;
}justify-content : 주 축의 정렬 방법을 설정한다.
# Items를 컨테이너 시작에 정렬, 왼쪽 정렬(default)
justify-content: flex-start
# Items을 컨테이너 끝에서 정렬, 오른쪽 정렬
justify-content: flex-end;
# 행(row) 양 옆 공백과 사이 공백이 있게 정렬
justify-content: space-around;
# 줄(column) 양 옆 공백은 없고 사이 공백만 있게 정렬
justify-content: space-between;
# 양 옆에만 공백이 있게 가운데 정렬
justify-content: center;align-items : flex items를 정렬하는 데 사용한다.
# 컨테이너 중앙에 items를 정렬
align-items: center;
# 컨테이너 상단에 items를 정렬
align-items: flex-start;
# 컨테이너 하단에 items를 정렬
align-items: flex-end;
# items를 늘려 컨테이너를 꽉 채움.(default)
align-items: stretch;
# 문자 기준선에 맞춰서 items를 정렬
align-items: baseline;align-content : 2줄 이상일 때, 행을 정렬하는 데에 사용한다.
# items 행 사이에 동일한 간격을 두고 정렬
align-content: space-between;
# items 행 앞/뒤와 사이에 동일한 간격을 두고 정렬
align-content: space-around;
# items의 height를 늘려 나머지 공간을 꽉 채움.(default)
align-content: stretch;
# items를 모두 가운데로 모아서 정렬
align-content: center;
# items를 컨테이너 시작 부분인 상단으로 붙여서 정렬
align-content: flex-start;
# items를 컨테이너 끝 부분인 하단으로 붙여서 정렬
align-content: flex-end;Center 정렬하기
justify-content 및 속성을 모두 align-items로 설정하면 완벽하게 중앙에 배치된다.
justify-content: center;
align-itmes: center;Flex Items 속성
order : Flex Items의 순서를 설정한다. HTML에 적혀있는 것과는 상관없이 css를 통해 순서를 설정할 수 있다.
flex : flex-grow, flex-shrink, flex-basis의 단축 속성
flex-grow : Flex Item의 증가 너비 비율을 설정
flex-shrink : Flex Item의 감소 너비 비율을 설정
flex-basis : Flex Item의 (공간 배분 전) 기본 너비 설정
align-self : 교차 축(cross-axis)에서 Item의 정렬 방법을 설정 하나하나 다르게 줄 수 있음.
참고자료
https://heropy.blog/2018/11/24/css-flexible-box/
https://www.w3schools.com/css/css3_flexbox_container.asp#flex-direction
