CSS정렬3 CSS정렬 - Flex Items Flex Items 속성 속 성 설 명 값 order Flex Item의 순서 0 : 순서 없음 숫자 : 숫자가 작을 수록 먼저 flex-grow Flex Item의 증가 너비 비율 0 : 증가 비율 없음 숫자 : 증가 비율 flex-shrink Flex Item의 감소 너비 비율 1 : Flex Container 너비에 따라 감소 비율 적용 숫자 : 감소 비율 flex-basis Flex Item의 공간 배분 전 기본 너비 auto : 요소의 content 너비 단위 : px, em, rem 등 단위로 지정 order 속성 작을수록 정렬된다. flex-grow 속성 Flex Container에 나머지가 있을 경우 나머지 부분을 어느 비율로 채울 것인가를 계산 flex-grow가 0일 경우 지정해준 크기.. 2022. 9. 11. CSS 정렬 - Flex Container (2) Flex Container 속성( 주황색 defalut ) 속 성 설 명 값 flex-wrap Flex Items 묶음(줄 바꿈) 여부 nowrap : 묶음(줄 바꿈) 없음 wrap : 여러 줄로 묶음 wrap-reverse : wrap의 반대 방향으로 묶음 justify-content 주 축의 정렬 방법 flex-start : Flex Items를 시작점으로 정렬 flex-end : Flex Items를 끝으로 정렬 center : Flex Items 가운데 정렬 space-between : 각 Flex Item 사이를 균등하게 정렬 space-around : 각 Flex Item의 외부 여백을 균등하게 정렬 align-content 교차 축의 여러 줄 정렬하는 방법 stretch : Flex Item.. 2022. 9. 11. CSS 정렬 - Flex Container (1) 플렉스 1차원 레이아웃을 정렬하는 방법 * 1차원이라고 하는 이유? x축이나 y축으로 하나의 축으로 정렬하기 때문 Flex정렬하는 속성은 Flex Container(부모요소)에 지정하는 속성과 Felx Item(자식요소)에 지정하는 속성으로 나뉘어져 있다. Flex Container 속성 속 성 설 명 값 display Flex Container의 화면 출력(보여짐) 특성 flex : 블록 요소와 같이 Flex Container 정의 inline-flex : 인라인 요소와 같이 Flex Container 정의 flex-direction 주 축을 설정 row : 행 축 ( 좌 -> 우 ) row-reverse : 행 축 ( 우 -> 좌 ) column : 열 축 ( 위 -> 아래 ) column-rever.. 2022. 9. 11. 이전 1 다음
