FlexItem의 세밀한 제어 flex 속성

💡학습 목표💡

• Flex 아이템의 속성을 이해하고 사용할 수 있다.
• Flexbox 레이아웃에서 각 아이템의 순서, 크기 및 정렬을 제어할 수 있다.
• order, flex-grow, flex-shrink, flex-basis, flex, align-self 속성의 사용 목적과 상황을 파악할 수 있다.

 

Flex 아이템 속성 사용 목적

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

.item {
    flex: 1 1 200px;
}

 

시나리오 코드 1

 

결과출력