부모에다가 display:flex ;
를 주는 순간 자식들은 자동으로 inline 요소로 변하면서 수평정렬이 되게 된다. 방향은 direction으로 아래와 같이 수정가능하다.
예)
부모 요소에 flex 값 주기!
display: flex;
flex-direction: row-reverse; //row면 가로 정렬 column은 세로 정렬
row
행 축(좌-우)
row-reverse
행 축(우-좌) / 순서도 반대가 된다.
column
열 축 (위-아래)
column-reverse
열 축(아래-위) / 마찬가지로 순서도 반대가 된다.
nowrap
묶음 (줄바꿈) 없음
wrap
여러 줄로 묶음
wrap-reverse
wrap의 반대 방향으로 묶음
만약 부모의 요소의 크기가 자식 요소의 크기를 담기에 너무 작으면 자식 요소의 크기가 찌그러진다.
그럴 때 크기를 줄이지 말고 다음 줄로 넘어가게 하는 것을 flex-wrap이다.
nowrap
wrap
크기 변형 없음!
줄 안에서 정렬 방법
flex-start
flex items 를 시작점으로 정렬
flex-end
flex items를 끝점으로 정렬
center
flex items를 가운데 정렬
space-between
각 items를 가운데 정렬
space around
각 item의 외부 여백을 균등하게 정렬
space-evenly
여백을 모두 동일하게 정렬
교차 축의 한 줄 정렬 방법
stretch
Flex items를 교차축으로 늘림
flex-start
Flex items를 각 줄의 시작점으로 정렬
flex-end
Flex items를 각 줄의 끝점으로 정렬
center
Flex item를 각 줄의 가운데 정렬
baseline
Flex items를 각 줄의 문자 기준선에 정렬
교차 축의 여러 줄 정렬 방법
stretch
flex items를 시작점으로 정렬+늘어남
flex-start
flex items를 시작점으로 정렬
flex-end
flex items를 끝점으로 정렬
center
flex items를 가운데 정렬
space between
각 items 사이를 균등하게 정렬
space-around
각 item의 외부 여백을 균등하게 정렬