CSS Flexbox는 유연하고 반응성이 뛰어난 웹 레이아웃을 만들기 위한 강력한 도구입니다. 처음 배우기 시작했을 때 다양한 속성과 이들이 어떻게 함께 작동하는지에 대해 약간 혼란스러웠습니다. 그러나 실제 경험이 쌓이면서 상황이 복잡해지기 시작했습니다. 다음은 주요 Flexbox 속성에 대한 분석과 이를 통해 보다 직관적인 방식으로 레이아웃을 제어하는 데 도움이 되는 방법입니다.
1. justify-content: 주축을 따라 항목 정렬
그만큼 justify-content 속성은 기본 축을 따라 항목을 정렬하는 데 사용됩니다(기본적으로 가로로 정렬하거나 사용하는 경우 수직으로 정렬). flex-direction: column). 이 속성은 컨테이너 내에서 항목의 간격을 제어하는 데 도움이 됩니다.
예는 다음과 같습니다.
.container {
display: flex;
justify-content: center; /* Centers the items horizontally */
}
이 경우 컨테이너 내부의 항목은 사용 가능한 공간의 중앙에 정렬됩니다. 다음과 같은 다른 값을 사용할 수도 있습니다. flex-start 항목을 왼쪽으로 정렬하거나 space-between 첫 번째 항목과 마지막 항목을 컨테이너 가장자리에 맞춰 균등하게 펼칩니다.
2. align-items: 교차축을 따라 항목 정렬
출처 : medium.com