flex기초 2

이어서 flex에 대해 계속 알아보겠습니다.

align-content

플렉스 아이템들이 줄바뀜이 있을 때 수직축 행을 정렬하는 방법을 정하는 속성입니다.

.box-container {
	flex-wrap: wrap;
	align-content: stretch;
	/* align-content: flex-start; */
	/* align-content: flex-end; */
	/* align-content: center; */
	/* align-content: space-between; */
	/* align-content: space-around; */
	/* align-content: space-evenly; */
}

stretch는 기본값으로 아이템이 수직축 행의 전체 공간을 차지합니다.
flex-start: 아이템들을 컨테이너의 맨 위로 정렬합니다.
flex-end: 아이템들을 컨테이너의 맨 아래로 정렬합니다.
center: 아이템들을 수직 방향으로 가운데로 정렬합니다.
space-between: 아이템들을 컨테이너 내에서 균등한 간격으로 정렬합니다.
space-around: 아이템들을 컨테이너 주위에 균등한 간격으로 정렬합니다.
space-evenly: 아이템들을 컨테이너 주위에 균등한 간격으로 정렬하되, 처음과 마지막 아이템 앞 뒤의 간격도 균등하게 설정합니다.
stretch: 아이템들을 컨테이너의 높이에 맞게 늘립니다.
baseline: 아이템들의 텍스트 베이스라인을 정렬합니다.

FLEX아이템에 적용되는 속성들

flex-basis

flex-basis는 Flexbox 레이아웃에서 아이템의 초기 크기를 지정하는 속성입니다.

.item {
	flex-basis: auto; /* 기본값 */
	/* flex-basis: 0; */
	/* flex-basis: 50%; */
	/* flex-basis: 300px; */
}

length: 아이템의 초기 크기를 고정된 길이로 지정할 수 있습니다. 예를 들어, flex-basis: 200px;와 같이 사용할 수 있습니다.
percentage: 컨테이너의 너비에 대한 백분율로 아이템의 초기 크기를 지정할 수 있습니다. 예를 들어, flex-basis: 50%;와 같이 사용할 수 있습니다.
auto: 아이템의 내용에 따라 초기 크기가 자동으로 결정됩니다. 일반적으로 내용의 크기에 맞추려면 이 값을 사용합니다.

flex-grow

Flexbox 레이아웃에서 아이템의 확장 비율을 지정하는 속성입니다. 이 속성을 사용하여 컨테이너 내에서 여분의 공간이 있을 때 아이템이 어떻게 확장되는지를 제어할 수 있습니다.

.item {
	flex-grow: 양의실수;
	/* flex-grow: 0; */ /* 기본값 */
}

기본적으로 모든 아이템의 flex-grow 값은 0이며, 이 경우에는 여분의 공간이 있을 때도 아이템이 확장되지 않습니다. flex-grow 값을 1로 설정하면, 아이템은 사용 가능한 공간에 따라 나머지 아이템들과 비교하여 확장될 비율을 나타냅니다. 만약 한 아이템의 flex-grow 값을 2로 설정하고 다른 아이템들이 1로 설정되어 있다면, 첫 번째 아이템은 두 배로 많은 공간을 차지하려고 할 것입니다.

flex-grow 속성을 사용하여 아이템의 확장을 조절함으로써 Flexbox 레이아웃에서 아이템들의 배치와 크기를 조정할 수 있습니다.

flex-shrink

flex-shrink는 Flexbox 레이아웃에서 아이템의 축소 비율을 지정하는 속성입니다. 이 속성을 사용하여 컨테이너 내에서 여분의 공간이 부족할 때 아이템이 어떻게 축소되는지를 제어할 수 있습니다.

.item {
  flex-shrink: 양의실수;
  flex-shrink: 1; /* 기본값 */
}

flex-shrink 속성은 아이템의 크기가 컨테이너의 사용 가능한 공간보다 큰 경우에 어떤 아이템이 얼마나 축소되는지를 결정합니다. 각 아이템의 flex-shrink 값이 클수록, 해당 아이템은 더 많이 축소되려고 할 것입니다.

기본적으로 모든 아이템의 flex-shrink 값은 1이며, 이 경우에는 아이템의 크기가 컨테이너의 사용 가능한 공간보다 클 때 아이템이 비율대로 축소됩니다. flex-shrink 값을 0으로 설정하면, 해당 아이템은 축소되지 않고 원래 크기를 유지합니다.

flex

flex-grow, flex-shrink, flex-basis를 한 번에 쓸 수 있는 축약형 속성입니다.

.item {
  flex: <flex-grow> <flex-shrink> <flex-basis>;
}

flex 축약형 속성을 사용하면 간결하게 아이템의 크기와 동작을 설정할 수 있으며, 이를 통해 레이아웃을 조절하고 원하는 디자인을 만들 수 있습니다.