CSS flex

1. flex란?
2. flex-direction
3. flex-wrap
4. justify-content
5. align-items
6. align-content

 

1. flex란?

 

css의 flex 속성은 html문서의 레이아웃을 만들기 위해 고안된 속성입니다.

 

flex는 크게 부모 요소인 flex-container와 자식 요소인 flex-item으로 구성됩니다.

 

 

See the Pen Untitled by cmp (@cmpset) on CodePen.

 

flex를 사용하기 위해 flex-container로 사용될 부모 <div>요소 하나와

flex-item으로 사용될 자식 <div>요소 다섯개를 준비했습니다.

 

<div>요소는 기본적으로 block형식이라서 한 행을 전부 차지합니다. 그래서 세로로 배치되게 됩니다.

 

여기서 flex를 시작하고 싶다면 부모 요소인 flex-container에  display: flex  속성을 추가하면 됩니다.

 

See the Pen flex-1 by cmp (@cmpset) on CodePen.

 

요소가 flex 형식으로 바뀌면 우선 margin이 사라지고

content, padding, border를 합친 크기만큼의 영역을 차지하게 됩니다.

 

그래서 위의 flex-item은 <div>태그이지만 한 행을 전부 차지하지 않게 되었습니다.

 

또한 flex-item이 전부 가로로 배치된 모습을 볼 수 있는데 이것은  main-axis  때문입니다.

 

 

flex 형식에서는 두개의 축이 만들어지는데,

각각 main-axis(중심축 또는 메인축)와 cross-axis(교차축 또는 수직축)입니다.

 

main-axis는 flex-item이 정렬되는 방향을 의미하고, cross-axis는 main-axis와 교차하는 축을 의미합니다.

 

여기서 main-axis의 기본값이 row, 즉 가로방향입니다. 그래서 flex-item이 가로로 배치되게 되었습니다.

 

 

2. flex-direction

•   flex-direction: row(기본값)  가로(행) 방향으로 정렬(
•   flex-direction: row-reverse  가로 방향 역순으로 정렬(오른쪽에서 왼쪽으로)
•   flex-direction: column  세로(열) 방향으로 정렬
•   flex-direction: column-reverese   세로(열) 방향 역순으로 정렬(아래부터 위로)

flex-direction 속성을 사용하면 main-axis를 바꿀 수 있습니다. 가로 정렬인 row가 기본값입니다.

 

main-axis를 바꾸면 그에 따라 cross-axis도 바뀌게 됩니다.

 

 

 

3. flex-wrap

•   flex-wrap: nowrap(기본값)  줄바꿈을 하지 않고 요소의 크기를 최대한 줄임
•   flex-wrap: wrap  요소의 크기를 유지하고 cross-axis방향으로 줄을 바꿈
•   flex-wrap: wrap-reverse  wrap과 비슷하나 flex-item을 역순으로 배치

flex-wrap 속성은 flex-item 요소의 길이 총합이 flex-container의 길이보다 길어진 경우, 어떻게 배치할지를 지정하는 속성입니다.

 

기본적으로 줄바꿈을 하지 않고, 요소의 크기를 최대한 줄이는 nowrap으로 설정되어 있습니다.

4. flex-flow

flex-direction과 flex-wrap은 flex 형식의 가장 기본적인 속성입니다.

 

그래서 flex-flow 구문을 사용하면 이 둘을 한번에 바꿀 수 있습니다.

 

사용법은 아래처럼 flex-flow:를 적은 후 direction과 wrap 순서로 속성을 설정하면 됩니다.

#flex-container{
	flex-flow: column wrap;
}

 

5. justify-content

•  justify-content: flex-start;  main-axis의 시작 지점에 정렬
•  justify-content: flex-end;  main-axis의 끝 지점에 정렬
•  justify-content: center;  main-axis의 정 가운데 정렬
•  justify-content: space-between;  첫 번째 요소는 main-axis의 시작 지점, 마지막 요소는 main-axis의 마지막 지점에 배치한 후 요소끼리 동일한 간격을 가지게 정렬함
•  justify-content: space-around;  요소 사이에 같은 크기의 공간을 배치해 정렬함
•  justify-content: space-evenly;  요소 끼리 같은 크기의 간격을 가지게끔 정렬함

justify-content 속성은 요소의 main-axis 정렬 방식을 바꾸는 속성입니다.

위의 세 속성은 요소의 시작 지점을 조절해 정렬합니다.

 

한편 위 세 속성은 요소 간의 간격을 조절해줍니다.

 

첫 번째 요소를 잘 보면 세 속성의 차이를 확실하게 알 수 있습니다.

space-around는 첫 번째요소와 main-axis 시작지점 사이의 간격과, 첫 번째 요소와 두번째 요소 사이의 간격이 다릅니다.

 

반면 space-evenly는 간격이 전부 동일합니다.

 

한편 space-between은 첫 번째 요소가 아예 main-axis 시작지점에 붙어있습니다.

.

6. align-items

•  align-items: strectch;  cross-axis의 길이(flex-container의 높이)만큼 flex-item의 높이를 늘림
•  align-items: flex-start;  cross-axis의 시작 지점에 정렬
•  align-items: flex-end;  cross-axis의 끝 지점에 정렬
•  align-items: center;  cross-axis의 정 가운데 정렬
•  align-items: baseline;  flex-item의 글자의 baseline을 기준으로 정렬

align-items는 cross-axis와 관련된 속성입니다. flex-item의 수직 방향 정렬을 바꿀 수 있습니다.

baseline 속성은 flex-item을, flex-item 가진 content의 밑선을 기준으로 정렬시키는 속성입니다. 

 

7. align-content

•  align-content: flex-start;  cross-axis의 시작 지점으로 정렬
•  align-content: flex-end;  cross-axis의 끝 지점으로 정렬
•  align-content: center;  cross-axis의 정 가운데 지점으로 정렬
•  align-content: space-between;  첫 번째 줄은 cross-axis의 시작 지점, 마지막 줄은 cross-axis의 마지막 지점에 배치한 후 나머지 줄이 동일한 간격을 가지게 정렬함
•  align-content: space-around;  각 줄 사이에 같은 크기의 공간을 배치해 정렬함
•  align-content: space-evenly;  각 줄 사이에 같은 크기의 간격을 가지게끔 정렬

align-content는 flex-wrap: wrap  또는  flex-wrap: wrap-reverse 과 함께 사용하는 속성입니다.

줄바꿈이 된 flex-item들의 cross-axis 정렬 방식을 결정합니다.

 

속성의 세세한 내용은 justify-content와 비슷합니다.