[포스코x코딩온] 웹개발자 입문 과정 2주차 회고-01 | CSS Flex

1. display:flex:수평 정렬하게 한다.

2. flex-direction: 주축을 설정한다.

  - flex-direction:row - 행축(좌 > 우)로 정렬시킨다.

  - flex-direction:row-reverse - 행축(우 > 좌)로 정렬시킨다. / 순서가 반전됨

  - flex-direction:column - 열축(위 > 아래)로 정렬시킨다.

  - flex-direction:column-reverse - 열축(아래 > 위)로 정렬시킨다.  / 순서가 반전됨

 

3. flex-wrap: flex items 묶음(줄 바꿈) 여부

  - flex-wrap:nowrap - 묶음(줄 바꿈) 없음.

  - flex-wrap:wrap - 줄바꿈 있음, 여러 줄로 묶음 

  - (flex-wrap:wrap-reverse - wrap의 반대 방향으로 묶음.)

 

4. justify-content: 주 축 정렬 방법

  - justify-content:flex-start - flex items을 시작점으로 정렬

  - justify-content:flex-end - flex items을 끝점으로 정렬  /  순서 반전 x (row-reverse와 다름)

  - justify-content:center -  flex items을 가운데 정렬

  - justify-content:space-between - 각 flex item 사이를 균등하게 정렬 (끝-끝)

  - justify-content:space-around - 각 flex item의 외부 여백을 균등하게 정렬

  - justify-content:space-evenly - 각 flex item 사이와  외부 여백을 균등하게 정렬

 

5. align-content: 교차 축의 여러 줄 정렬 방법

  - align-content:stretch - flex items을 시작점으로 정렬

  - align-content:flex-start - flex items을 시작점으로 정렬  

  - align-content:flex-end - flex items을 끝점으로 정렬  /  순서 반전 x (row-reverse와 다름)

  - align-content:center -  flex items을 가운데 정렬

  - align-content:space-between - 각 flex item 사이를 균등하게 정렬 (끝-끝)

  - align-content:space-around - 각 flex item의 외부 여백을 균등하게 정렬

  - align-content:space-evenly - 각 flex item 사이와  외부 여백을 균등하게 정렬