align-content1 align-content 지난 align-items와 flex-direction에 이어 align-content 속성을 알아보자. 플렉스된 컨테이너 안에 자식들이 매우 많을 경우 여러 줄이 형성된다. 이때 한 줄을 하나의 content로 본다. 그래서 속성 이름이 align-content이다. 이 속성은 컨텐츠들을 각각 세로로 정렬하고, 요소 사이에(between), 주위에(around) 동일한 간격을 주어 배치할 수 있다. 우선 부모박스 안에 들어갈 수 있도록 넓이 높이를 유지하며 들어 갈 수 있도록 flex-wrap: wrap;을 적용시킨다. 위의 이미지 처럼 gap과 align-content를 같이 적용하면 가로 세로에 동일한 간격을 줄 수도 있고 따로 간격을 지정할 수 있다. gap은 flex를 주지 않아도 적용 가능하다.. 2024. 6. 13. 이전 1 다음
