햄발

결과  풀이 홈 소개 서비스 연락처 수평 및 수직 정렬된 아이템 카드 1 카드 내용 1 카드 2 카드 내용 2 카드 3 카드 내용 3 카드 4 카드 내용 4 카드 5 카드 내용 5 카드 6 카드 내용 6

Flex 아이템 속성 사용 목적 order : 아이템의 표시 순서를 제어하여 중요도에 따라 배치 순서를 변경하기 위해 사용합니다. 즉, 중요도에 따라 순서를 변경하거나 특정 아이템을 맨 앞이나 맨 뒤에 배치할 때 사용할 수 있습니다.flex-grow : Flex 컨테이너 내의 남은 공간을 아이템들이 비율에 맞게 차지하도록 하기 위해 사용합니다. 또는 여러 아이템이 있고, 특정 아이템이 더 많은 공간을 차지해야 할 때 사용할 수도 있습니다.flex-shrink : 공간이 부족할 때 아이템이 얼마나 줄어들지를 결정하여 반응형 디자인에서 레이아웃을 유지하기 위해 사용합니다.flex-basis : 아이템의 기본 크기를 설정하여 초기 크기를 지정하고 나머지 공간을 flex-grow와 flex-shrink로 조정하..

교차축 정렬  Flexbox 레이아웃에서 교차축(cross axis) 은 주 축(main axis)에 수직인 축 을 의미합니다. 교차축 정렬은 이 축을 따라 Flex 아이템들을 배치하는 방법입니다. 주 축이 수평 방향일 때 교차축은 수직 방향이 되고, 주 축이 수직 방향일 때 교차축은 수평 방향이 됩니다. 교차축 정렬을 위해 두 가지 주요 align-items와 align-content 속성을 사용합니다.   align-itemsalign-items 속성은 Flex 컨테이너 내의 개별 Flex 아이템들을 교차축을 따라 정렬합니다. Flex 컨테이너의 높이와 관계없이 각 아이템의 위치를 지정할 수 있습니다.flex-start: 아이템들을 교차축의 시작 부분에 정렬합니다.flex-end: 아이템들을 교차축의..