flex
flex란?
요소들을 행과 열 형태로 배치하는 일차원 레이아웃 방법
기존 float, position 방법으로 레이아웃을 표현하는 것은 상당히 복잡함
요소지정
- 정렬하고자 하는 요소들은 다음과 같이 지정한다
.flex {
display: flex;
}flex-direction (열 또는 행)
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;flex-wrap (줄 바꿈 설정)
- 요소들을 강제로 한준에 배치할 것 인지 여러행으로 나누어 표현할 것 인지 정함
/* 기본 값으로 부모 요소 영억을 벗어나도 한줄에 배치함 */
flex-wrap: nowrap;
/* 요소들이 영역을 벗어나면 분할되어 여러 행에 걸쳐서 배치함 */
flex-wrap: wrap;main 축 정렬 (justify-content)
진행 축 정렬과 item 사이 간격을 제어함
flex-start,flex-end,center,space-between,space-around,splace-evenly
cross 축 정렬 (align-items, align-content)
align-items
진행 축과 교차하는 교차 축 정렬과 item 사이 간격을 제어함
flex-container 안에서 전체 item의 배치를 어떻게 할 것이냐에 대한 속성
align-content
컨테이너의 교차 축의 아이템들이 여러 줄일때 사용 가능
flex-wrap:wrap인 상태에서 사용해야 됨
flex-container에서 item의 줄 간격을 어떻게 배치할 것이냐에 대한 속성
flex-basis
flex-item의 초기 크기를 지정함기본값은
auto이며content-box의 크기를 변경함flex-basis값이 적용되어있다면 row일 경우 width 값이 무시, column일 경우 height 값이 무시함
flex-grow
flex-item이flex-container요소 내부에서 할당 가능한 공간의 정도를 선언item들이 모두 같은 값을 가지면 모두 동일한 공간을 차지함
값이 0인 경우 늘어나지 않음
flex-shrink
flex-item의 크기가flex-container의 크기보다 클 때 이 속성을 사용하면 설정한 값에 따라flex-item의 요소가 축소됨
댓글