우선 display: flex; 를 먼저 써줘야 한다.
1) flex-direction : 나열 방향 지정
row : 가로 정렬(왼쪽에서 오른쪽으로)
row-reverse : 가로 정렬(오른쪽에서 왼쪽으로)
column : 세로 정렬(위에서 아래로)
column-reverse : 세로 정렬(아래에서 위로)
2) flex-wrap : 정렬 방법 지정
nowrap : 요소들의 총 넓이가 부모 넓이에 맞게 모두 자동 축소
wrap : 요소들의 총 넓이가 부모 넓이 보다 클 때, 이 요소들을 다음 줄에 이어서 정렬(위->아래)
wrap-reverse : wrap 기능을 아래에서 위로 정렬해줌.
3) flex item의 정렬과 간격
① justify content: '진행 축' 정렬과 간격을 조정
flex-start : 아이템들을 시작점부터 정렬. flex-direction이 row일 때는 왼쪽에서, column일 때는 위에서 정렬
flex-end : 아이템들을 끝점(오른쪽/아래)부터 정렬.
center : 가운데 정렬
space-between : 아이템들의 사이에 균일한 간격 만듦
space-around : 아이템들의 둘레에 균일한 간격을 만듦
space-evenly : 아이템들의 사이와 양 끝에 일정한 간격을 만듦
② align-items: '교차 축' 정렬을 조정
진행축과 교차하는 교차축을 정렬하는 기능
stretch : 기본값으로, container 전체에 맞추기 위함
center : container의 가운데 정렬
flex-start : container의 시작점(위/왼쪽)에 위치
flex-end : container의 시작점(아래/오른쪽)에 위치
baseline : container의 baseline에 위치
TIL
영화 검색페이지 만들기 과제를 하며, CSS를 하던 과정 중 이해 안가던 flex 속성에 대해 정리해봤다.
많이 쓰이는 CSS 속성들 중 하나이므로 세세하게 알아두면 좋을 것 같다.
WIL
Javascript의 기본문법을 공부하고 조건문과 반복문 함수 작성 방법에 대해 배우고 실습하는 주였다. 월요일, 화요일 강의를 들어도 예제 문제를 풀려고 하면 손도 못댔는데 계속 연습해보며 금요일이 되니 이제 손댈 수 있게 되었다. 감격적인..! 튜터님께서 오구오구 칭찬을 해주시니 좀 더 힘낼 수 있었다. 계속해서 수정해보면서 실행시켜보는 자세가 좋다고 말씀해주셨다. 앞으로도 계속해서 노력하고, 모르면 가만히 있지 않고 여러 시도를 해봐야겠다.
