flexbox

kangdari·2020년 2월 9일

뷰보트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 CSS3의 새로운 레이아웃 방식이다. 복잡한 계산 없이 요소의 크기와 순서를 유현하게 배치할 수 있다.

flexbox는 복수의 자식 요소인 flex item과 그 상위 부모 요소인 flex container로 구성된다.

display: flex

flex 속성이 적용된 요소는 flex container가 되고, flex container의 자식 요소는 flex item이 된다.

flex item은 주축(main axis)에 따라 정렬된다. 주축의 방향은 flex container의 flex-direction 속성에 의해서 결정된다.

flex-direction : flex item이 container 안에 위치하는 방법 지정 ( 주축 설정)
( row(default), row-reverse, column, column-reverse, initial, inherit )
flex-wrap : flexible item을 wrap 할 것인지 지정
nowrap(defualt): item이 다음 줄로 넘어가지 않음. item의 너비를 줄여서 한 줄에 모두 배치
wrap : item이 여유 공간이 없다면 다음 줄로 넘어가서 배치 됨.
wrap-reverse, initial, inherit )
justify-content : 주측을 기준으로 item의 정렬 방식 설정
( flex-start, flex-end, center, space-between, space-around )
align-items : 교차축을 기준으로 item의 정렬 방식 설정
stretch(default) : item의 높이가 container의 높이와 같게 변경된 뒤 연이어 배치 됨.
flex-start, flex-end, center, baseline(container의 기준선에 배치)
align-content : align-items 속성과 비슷한 동작을 하지만, item을 정렬하는 대신에 플렉스 라인을 정렬함. flex-wrap 속성의 동작을 변경할 수 있음.
stretch: 플렉스 라인의 높이가 남는 공간을 전부 차지
flex-start, flex-end, center, space-between, space-around

.box:nth-child(1){
    margin-right: auto;
}

flex : container 안에 있는 item의 너비를 상대적으로 설정 가능. ( flex-grow, flex-shrink, flex-basis의 단축 속성) flex:1; // flex: 1 1 0 //flex:1, flex-shrink: 1; flex-basis: 0;
item의 크기를 고정해야하는 경우(logo 같이 크기의 변경이 필요하지 않는 경우) flex: none 을 사용
flex-grow : Item의 증가 너비 비율을 설정, 숫자가 클수록 더 많은 너비를 가짐.( default: 0) Item이 가변 너비가 아니거나 0일 경우 효과 없음.

.box:nth-child(2){
    align-self: flex-start;
}

.box:nth-child(4){order: -1;}
.box:nth-child(1){order: 1;}