flex

가로 컨텐츠 :

• display: flex : 가로 형태 지정, 가로형태 레이아웃의 기본이다
• flex-direction: row-reverse; : 가로 형태를 좌우반전시킴column : 한계적으로 수직 컨텐츠로 다시 변환시킴
• align-items: center; : 상하 중앙 정렬 자세한 설명은 아래를 본다

수평값 :

• justify-content: flex-start;
• justify-content: center;
• justify-content: flex-end; : 각각 시작 가운데 마지막 정렬
• justify-content: space-between; : 컨텐츠와 공간 모두 똑같이 나누어 채움
• justify-content: space-around; : 컨텐츠 양쪽에 공간을 넣어 채움
• justify-content: space-evenly; : 여백의 공간을 균일하게 맞추어 채움

수직값 :

• align-items: start
• align-items: center
• align-items: end
• align-items: space-between
• align-items: space-around
• align-items: space-evenly
• flex-wrap : wrap | nowrap : 컨텐츠를 수평방향 정렬하지 않고 수직값도 같이 넣어서 정렬한다.

사실상 수평조정은 justify-content 로, 수직관련 조정은 align-items 로 하는게 좋다, 물론 justify-items, align-content 도 가능은 하나 직접 실험 해 보면 굉장히 괴리한 결과가 나온다.

align 은 수직관계, heigth 값을 정하지 않으면 작동하지 않는다.

justify 는 수평관계 조정 관련 width 값을 정하지 않으면 작동하지 않음.

• • flex 상태에선 수직값은 잘 사용되지 않음, 애초에 height 값이 자동으로 주어지기 때문이기도 한데, 물론 조정해주어야 하는 경우가 많다.

위의 align, justify 는 컨텐츠가 여러개일 때 사용하게 된다.

• float ???????
• flex-shrink: 0; : 자식의 크기로 인해 부모가 자동으로 커지는 것을 방지함, 만약 가로 flex 슬라이드 만들고 이 명령어 안넣으면 모든 컨텐츠가 한 화면 페이지 안에 다나오게 됨, 무조건임
• flex-grow : 1; : 할당하는 크기비율을 조정함