Flex

플랙서블 박스 : CSS3부터 제공되는 레이아웃 모델
이 레이아웃은 서로다른 화면과 기기에서도 html 요소의 자동 재정렬을 돕고 언제나 레이아웃을 똑같이 유지시키는 속성

플렉스의 구성

• 컨테이너로 지정할 요소에 속성을 부여 (display: flex)
• 컨테이너는 반드시 하나이상의 플랙스 아이템을 포함해야한다
• 플랙스 박스는 오직 요소가 내부에서 어떻게 위치하는가만 정의

플랙스 속성 컨테이너

1. flex-direction : 요소가 배치될 방향설정
2. justify-content : 수평 방향 정렬방식 설정
3. align-items :수평방향 정렬방식 설정
4. flex-wrap : 플랙스 라인에 여유공간이 있을때 다음라인으로 넘길지 말지를 설정
5. flex-flow : flex-direction + flex-wrap
6. align-content : flex-wrap의 동작을 변경 (align-items와 큰 차이는 없지만 아이템 대신라인을 정렬한다

flex-direction

flex-direction의 속성값

• row : 기본설정
• row-reverse : 아이템을 오른쪽에서 왼쪽으로 배치
• column : 수직 일반 설정
• column-reverse : 수직 역방향 배치

justify-content

justify-content 속성값 정리

• flex-start : 기본값
• flex-end : 아이템을 컨테이너의 뒤쪽부터 배치
• center : 컨테이너 가운데부터 배치
• space-between : 아이템들 사이에 여유공간을 두고 배치
• space-around : 사이사이 뿐만 아니라 앞 뒤에도 여유공간을 두고 배치

align-items

align-items 속성값 정리

• flex-start : 컨테이너 위쪽에 배치
• flex-end : 컨테이너 아래쪽에 배치
• center : 컨테이너 중앙에 배치

flex-wrap

flex-wrap 속성값 정리

• nowrap : 기본설정
• wrap : 아이템이 여유공간이 없다면 다음라인에서 배치
• wrap-reverse : wrap과 유사하나 (윗 라인으로 배치)

---

플랙스 속성 아이템

• order : 아이템 순서 배치
• margin(auto)
• align-self : 컨테이너에 적용된 속성보다 우선하여 아이템을 정렬할때 사용하는 속성
• flex