Web_Study/CSS (3) 썸네일형 리스트형 Flexbox_3 flex item : flex container의 자식 요소 ▶ order (현업에서 자주사용X) flex item의 배치 순서를 지정 html의 요소를 임의적으로 바꿈 1 2 .flex-container{ display:flex; } .item1{ order:1; } .item2{ order:0; } ▶ flex-grow (기본값:1) flex-item의 너비 확대에 대한 인자 설정 container의 나머지 너비를 채움 item2의 증가폭이 2배가 됨 .flex-container{ display:flex; } .item1{ flex-grow:1; } .item2{ flex-grow:2; } 너비가 증가했을 때, item2가 더 많이 확대된 것 확인 ▶ flex-shrink (기본값:0) flex-gr.. Flexbox_2 flex container : 전체적인 정렬이나 흐름에 관련된 속성 / 전체에 관여 ▶ flex-directionrow : 좌→우 column : 위→아래row-reverse : 우→좌column-reverse : 아래→위 ▶ flex-wrap : flex item이 많은 경우 넘어가는 설정wrap: 넘어간 크기만큼 개행되어짐 wrap-reverse : 아래부터 정렬되어짐nowrap : 기본속성 : 개행하지 않겠다는거 -> 크기가 줄어듬 ▶ flex-flow : flex-direction과 flex-wrap 속성을 설정하기 위한 단축 설정 ( 기본값 : row nowrap ).flex-container{ display:flex; flex-flow:row wrap; /* 기본 꼴 : flex-f.. FlexBox_1 ▶ FlexBox : HTML에서 유연하게 행과 열 형태로 레이아웃을 구성하는 메서드 ▶ 기본구성 FlexContainer : flex-item을 감싸고 있는 부모 요소 FlexItem : flex-container 안에 있는 여러개의 자식 요소 ▶ 기본 생성 : 부모요소에 display:flex 속성 부여 .flex-container{ display:flex; } ▶ Flex-Direction : Flex Item은 주축(Main Axis)에 따라 정렬됨 row(기본) : 주축의 방향이 왼쪽에서 오른쪽으로 column : 주축의 방향이 위에서 아래로 .flex-container{ display:flex; flex-direction:row; //column } 이전 1 다음
