[CSS] Flex

🌱 Flex1

✏️어떻게 사용하니

1. 플렉스 박스 쓸거다

display: flex;

요소들을 감싸고 있는 부모한테 주기

2. 가로 정렬 > 세로 정렬

display: flex;
flex-direction: row;  

flex 방향 설정시 Axis 형태가 달라짐
row 설정일 경우: 가로방향 main axis, cross axis(세로)
columns 설정일 경우: 세로방향 main axis, cross axis(가로)

3. 무조건 한 줄 안에?

display: flex;
flex-direction: row;  
flex-warp: nowarp;

기본값: nowarp 감싸지 않고 사이즈를 줄여서라도 한 줄로 정렬해버림
warp일 경우, 한 줄에 정렬 어려우면 여러줄 만들어 정렬

4. 플렉스 정렬~~~

justify-content: center;  //중간정렬
justify-content: space-between;  //요소들 사이 간격을 같게
justify-content: space-around;  // 요소들 주변 사이 간격 같게 

justify-content 정렬을 할 때 flex-direction 방향으로 하고 싶을 때
aligin-items, aligin-contents coross axis 방향으로 정렬하고 싶을 때
반대 방향일 경우 main-axis 기준으로 동일하게 작용

align-items: center;  //cross axis 중간정렬
align-items: flex-start;  //cross axis 기준 위에서 아래
align-items: flex-end;  // cross axis 기준 아래에서 위로

coross axis 방향으로 정렬하고 싶을 때

✏️align-items/ align-contents 차이

flex-warp: warp;

align-contents 을 사용하려면 flex-warp이 warp인 상태여야 함
align-items는 하나의 flex-axis 기준.
align-contents 전체 큰 flex-axis 기준 정렬.

✏️order

.red {order: 1;}
.yellow {order: 2;}
.blue {order: 3;}

flex 사용할 경우 각 요소에 order 값을 주고 순서를 원하는대로 배치할 수 있음

🌷 결론

요소를 감사고 있는 태그에 flex 사용 선언
flex원하는 방향 설정하고 한 줄 정렬이면 nowarp, 상관없으면 warp.

flex 설정 방향(main-axis) 정렬시 justify-content
flex 설정 방향기준 수직(cross-axis) 정렬시 align-items/ align-contents

flex 사용 시 각 요소에 order 값을 주어 원하는대로 순서배치 가능