클로리셔 작은 공간

1. flex-direction - 요소들 나열 방향 지정 A B C D E F main { width: 200px; height: 200px; border: 1px solid lightgray; display: flex; flex-direction:row; } main div { width: 50px; height: 50px; } flex-direction 속성의 부모 요소에 display:flex; 설정 되어 있어야 합니다. 그리고 flex-direction 속성 기능을 기재하지 않으면 기본값은 row 이므로 즉, 가로로 정렬 됩니다. row : 가로로 정렬 row-reverse : 가로로 오른쪽에서부터 정렬 column : 세로로 정렬 column-reverse : 세로로 밑에서부터 정렬 initi..

CSS - Display : Flex 1. 인라인 요소를 가운데 오게 하는 방법 - height 값과 line-height 값을 같이 사용하면 중간에 오게 할 수 있습니다. 단, 한 줄일때만 사용할 수 있습니다. - 많이 사용하는 방법은 아니며 활용성이 좋은 방법은 아닙니다. 2. 블록요소를 가운데 오게 하는 방법 - 블록요소 양쪽에 auto 값을 주면 가운데 정렬이 가능합니다. margin: 0 auto; 보통 위 아래는 0을 주고 양쪽은 auto 사용. - auto는 자동값 또는 기본값을 의미합니다. 3. 테이블 구조를 이용하는 방법 - vertical-align: middle 속성을 이용한 가운데 정렬 방법입니다. - display: table을 잘 사용하지 않고 구조가 복잡해지기 때문에 잘 사용하..

1. justify-content CSS justify-content: flex-start [기본값] | flex-end | center | space-between | space-around | space-evenly .flex-item { justify-content: center; } flex item의 ‘진행 축’ 정렬과 간격을 제어하는 ‘justify-content’. justify-content 속성은 ‘진행 축’ 정렬과 아이템 사이의 간격을 제어합니다. flex-direction: row | row-reverse 인 경우 x축 정렬을 제어합니다. flex-direction: column | column-reverse 인 경우 y축 정렬을 제어합니다. 2. align-items CSS alig..