display flex, grid

grid

속성	설명	예시
`display: grid`	그리드 컨테이너를 설정	.container { display: grid; }
`grid-template-columns`	그리드의 열 크기 정의	.container { grid-template-columns: 100px 200px; }
`grid-template-rows`	그리드의 행 크기 정의	.container { grid-template-rows: 100px 200px; }
`grid-template-areas`	그리드 항목의 배치 구조를 시각적으로 정의	.container { grid-template-areas: "header header" "main sidebar"; }
`grid-column-gap`	열 간의 간격을 설정	.container { grid-column-gap: 10px; }
`grid-row-gap`	행 간의 간격을 설정	.container { grid-row-gap: 20px; }
`grid-gap`	열과 행 간의 간격을 동시에 설정	.container { grid-gap: 10px 20px; }
`grid-auto-columns`	자동 생성된 열의 크기 설정	.container { grid-auto-columns: 100px; }
`grid-auto-rows`	자동 생성된 행의 크기 설정	.container { grid-auto-rows: 150px; }
`grid-auto-flow`	그리드 항목의 자동 배치 흐름 설정 (기본: row)	.container { grid-auto-flow: row dense; }
`grid-column`	그리드 항목이 차지할 열 범위 설정	.item { grid-column: 1 / 3; }
`grid-row`	그리드 항목이 차지할 행 범위 설정	.item { grid-row: 1 / 2; }
`grid-column-start`	항목이 시작될 열을 정의	.item { grid-column-start: 1; }
`grid-column-end`	항목이 끝날 열을 정의	.item { grid-column-end: 3; }
`grid-row-start`	항목이 시작될 행을 정의	.item { grid-row-start: 1; }
`grid-row-end`	항목이 끝날 행을 정의	.item { grid-row-end: 3; }
`justify-items`	항목을 가로 방향으로 정렬	.container { justify-items: center; }
`align-items`	항목을 세로 방향으로 정렬	.container { align-items: center; }
`justify-content`	전체 그리드 컨테이너를 가로 방향으로 정렬	.container { justify-content: center; }
`align-content`	전체 그리드 컨테이너를 세로 방향으로 정렬	.container { align-content: center; }
`place-items`	justify-items와 align-items를 한 번에 설정	.container { place-items: center; }
`place-content`	justify-content와 align-content를 한 번에 설정	.container { place-content: center; }

 

 

 

See the Pen Untitled by wooyeon (@wooyeon06) on CodePen.

 

 

flex

주 축(main-axis)과 교차 축(cross-axis)

 

위에서 언급했었던 주 축(main-axis)과 교차 축(cross-axis)의 개념은 다음과 같다.
값 row는 Items를 수평축으로 표시하므로 이때는 주 축이 수평이며 교차 축은 수직이 된다.
반대로 값 column은 Items를 수직축으로 표시하므로 주 축은 수직이며 교차 축은 수평이 된다.
즉, 방향(수평, 수직)에 따라 주 축과 교차 축이 달라진다.

 

 

 

flex : 1 1 auto; //flex-grow flex-shrink flex-basis 

 

flex-grow

`flex-grow`는 0보다 큰 값을 세팅하면 Flexible 박스로 변하면서 남은 여백을 메우는 속성입니다.

 

flex-shrink

`flex-grow`속성이 남는 공간을 분배해서 나눠가지는 것이라면 `flex-shrink` 속성은 반대로 공간을 넘어갈 경우에 각 아이템들을 줄이는 방법을 설정하는 것입니다.

기본값은 1이고 속성값이 1 이상이라면 부모 컨테이너의 크기가 flex아이템보다 작아질 경우 부모 컨테이너에 맞춰서 크기가 줄어들게 됩니다.

 

flex-basis

flex 아이템의 기본 사이즈를 지정하는 속성입니다.

기본값은 auto이기 때문에 설정하지 않으면 컨텐츠의 크기에 따라서 사이즈가결정되게 됩니다.

따라서 `flex: 1 1 auto;`를 주게 되면

 

속성	설명	예시
`display: flex`	요소를 flex 컨테이너로 설정	.container { display: flex; }
`flex-direction`	주 축의 방향을 설정 (기본값: row)	.container { flex-direction: column; }
`flex-wrap`	자식 항목들이 컨테이너에서 넘칠 때 줄 바꿈을 설정	.container { flex-wrap: wrap; }
`flex-flow`	flex-direction과 flex-wrap을 동시에 설정	.container { flex-flow: row wrap; }
`justify-content`	자식 항목들을 주 축(가로 방향)으로 정렬	.container { justify-content: center; }
`align-items`	자식 항목들을 교차 축(세로 방향)으로 정렬	.container { align-items: flex-start; }
`align-self`	특정 자식 항목을 교차 축(세로 방향)으로 개별적으로 정렬	.item { align-self: center; }
`align-content`	여러 줄의 자식 항목들에 대해 교차 축(세로 방향)으로 정렬	.container { align-content: space-between; }
`justify-items`	자식 항목들을 개별적으로 주 축(가로 방향)으로 정렬	.container { justify-items: center; }
`justify-self`	특정 자식 항목을 주 축(가로 방향)으로 개별적으로 정렬	.item { justify-self: flex-end; }
`flex`	자식 항목에 flex-grow, flex-shrink, flex-basis를 설정	.item { flex: 1; }
`flex-grow`	자식 항목이 사용할 수 있는 여백을 비례적으로 늘리는 값 설정	.item { flex-grow: 2; }
`flex-shrink`	자식 항목이 부족한 공간에서 비례적으로 줄어드는 값 설정	.item { flex-shrink: 1; }
`flex-basis`	자식 항목의 기본 크기를 설정 (기본값: auto)	.item { flex-basis: 100px; }
`order`	자식 항목의 순서를 설정	.item { order: 2; }
`gap`	자식 항목들 사이의 간격을 설정	.container { gap: 10px; }
`justify-content`	자식 항목들을 주 축(가로 방향)으로 정렬	.container { justify-content: space-between; }

 

See the Pen Untitled by wooyeon (@wooyeon06) on CodePen.

 

 

✅ flex-shrink 비율 계산

아이템	flex-basis	flex-shrink	shrink 비중 = basis × shrink
item1	150px	1	150
item2	100px	1	100
item3	50px	2	100 ← 주목!
item4	100px	1	100
item5	100px	1	100
총합			550

 

item3 shrink 비중 = 100 / 550 = 약 18.18%
→ 100px * 0.1818 ≒ 18.18px 축소

 

item3는 약 18px 축소됩니다 → 50px - 18px ≒ 32px 정도로 줄어듭니다.

 

shrink 계산방법

flex-shrink를 사용하여 축소 비율을 계산할 때, 먼저 각 항목의 flex-shrink 값과 남은 공간을 기준으로 비율을 결정합니다.

총 항목의 축소 비율 계산 모든 항목의 flex-shrink 값을 더한 후, 각 항목의 flex-shrink 비율을 계산합니다.
예를 들어:
항목 A: flex-shrink: 1
항목 B: flex-shrink: 2
항목 C: flex-shrink: 1
총 flex-shrink 값은 1 + 2 + 1 = 4입니다.

각 항목의 축소 비율 계산 각 항목의 축소 비율은 flex-shrink 값에 따라 결정됩니다. 예를 들어, 총 축소 비율이 4일 때:

항목 A의 비율: 1 / 4 = 0.25
항목 B의 비율: 2 / 4 = 0.5
항목 C의 비율: 1 / 4 = 0.25

총 남은 공간에 대한 축소 이제 총 축소해야 할 공간을 계산하고, 각 항목에 비례하여 축소됩니다.
예를 들어, 전체 컨테이너의 크기가 500px이고, 항목의 합이 600px인 경우, 100px만큼 축소해야 합니다.

각 항목은 계산된 비율에 따라 축소됩니다:
항목 A: 100px * 0.25 = 25px
항목 B: 100px * 0.5 = 50px
항목 C: 100px * 0.25 = 25px

이렇게 flex-shrink 값에 따라 각 항목이 얼마나 축소될지를 비례적으로 계산할 수 있습니다.

 

---

 

https://velog.io/@joyh7680/flex-1-1-auto-flex-0-0-100px