[CSS] Flex 해버렸지 모얌

✅ Flex가 뭐냐면

• Flexible Box, Flexbox라고도 부르는데,
• 레이아웃 배치 전용 기능으로 고안
• float이나 inline-block등 기존 방식보다 강력하고 편리

🔸 일반적 구조는

<div class="continer"> <!-- 부모요소 Flex Container-->
    <div class="item"></div> <!-- 자식요소 Flex Item -->
    <div class="item"></div>
    <div class="item"></div>
</div>

• 컨테이너가 flex 영향을 받는 전체 공간
• 설정된 속성에 따라 각각의 아이템이 배치

✅ Container 속성

🔸 display : flex

• 적용시 기본적으로 내부 아이템들이 row 방향으로 배치
• 아이템들의 너비는 내용물의 width 만큼만 (inline처럼)
• 아이템들의 높이는 컨테이너의 높이만큼 늘어남

🔸 display : inline-flex

• flex가 전체 너비를 차지하는 반면
• inline-flex는 inline-block처럼 총 컨텐츠 너비만큼 차지

🔸 flex-direction

• 아이템이 배치뒤는 축의 방향 설정

  🔹 axis(축)

  • 아이템 배치 방향에 따라 축이 존재
  • 기본 배치 방향이 메인축 (Main Axis)
  • 메인축과 수직으로 교차하는 방향이 수직축 or 교차축 (Cross Axis)

• row는 행 방향
• row-reverse는 행 방향 역순 배치
• column은 열 방향
• column-reverse는 열 방향 역순 배치
• 디스플레이 너비에 따라서 배치를 바꾸는 방법도 고려 가능!!

🔸 flex-wrap : (nowrap/wrap/wrap-reverse)

• 줄넘김 처리 설정
• 컨테이너가 더 이상 아이템을 한 줄에 담을 공간이 없을 때
• 줄바꿈을 어떻게 할지 결정
• nowrap : 줄이 바뀌지 않고 컨텐츠가 잘림
• wrap : 제일 뒷 컨텐츠부터 아래로 이동
• wrap-reverse : 제일 뒷 컨텐츠부터 위로 이동

🔸 flex-flow

• flex-direction과 flex-wrap을 한번에 지정
• 두 속성을 한 칸 띄고 써주면 됨

🔸 justify-content

• 메인축 방향 정렬
• flex-start : 아이템 시작점으로 정렬
• flex-end : 끝점으로 정렬
• center : 가운데 정렬
• space-between : 아이템 사이에 균일한 간격을 만들어줌(시작과 끝 아이템은 각 끝으로 붙음)
• space-around : 아이템 둘레에 균일한 간격을 만들어줌(시작과 끝 아이템도 균일하게 띄어짐)
• space-evenly : 아이템과 컨테이너 사이에 모두 균일한 간격을 만들어줌
  • IE와 Edge 적용 안될 수 있음

🔸 align-items

• 수직축 방향 정렬
• stretch : 아이템이 수직축 끝까지 쭉 늘어남
• flex-start : 시작점에 정렬
• flex-end : 끝으로 정렬
• center : 가운데 정렬
• baseline : 아이템 컨텐츠의 베이스라인 기준 정렬

🔸 align-content

• flex-wrap:wrap이 설정된 상태에서 아이템들이 2행 이상 되었을 때,
• 수직축 방향 정렬을 결정
• stretch / flex-start / flex-end / center / space-between / space-around / space-evenly
• 각각의 동작방식은 위 내용들과 동일

✅ Item 속성

🔸 flex-basis

• 아이템의 기본 크기 설정
• flex-direction이 row일 때는 너비, col일 때는 높이
• row를 기준으로 봤을 때,
• auto : 기본값, 해당 아이템의 너비 사용
• 특정 수치 : px, %, rem 등
  => 더 작은 크기는 수치에 맞춰지고, 더 큰 크기는 원래 그대로
• content : 컨텐츠의 크기로, width를 따로 설정하지 않은 경우와 같음

🔸 flex-grow

• 아이템이 flex-basis보다 커질 수 있는지 결정
• 숫자값이 들어가는데, 기본값은 0
• 0보다 크면 해당 박스가 Flexible하게 변하고 원래 크기보다 커지며 빈 공간을 매움
• 각 아이템의 flex-grow 속성에 들어가는 숫자는,
• flex-basis를 제외한 🌟여백 부분🌟을 지정된 숫자의 비율로 나눠가짐
  => 각 전체 너비의 비율을 의미하는 게 아님!!

🔸 flex-shrink

• flex-grow와 쌍을 이루는 속성
• 아이템이 flex-basis의 값보다 작아질 수 있는지를 결정
• 숫자가 들어가고, 0보다 크면 해당 박스가 Flexible하게 변하고 flex-basis보다 작아짐
• 기본값이 1이기 때문에 아이템이 기본적으로 flex-basis보다 작아졌음
• 0으로 설정시 아이템 크기가 flex-basis보다 작아지지 않아 width 속성으로 고정폭 컬럼 쉽게 만들 수 있음

🔸 flex

• 서로 관련이 깊은 flex-grow / shrink / basis를 한 번에 쓸 수 있는 축약형 속성

.item {
	flex: 1;
	/* 
        flex-grow: 1; flex-shrink: 1; flex-basis: 0%; 
        이런 식으로 flex-basis 생략하면 flex-basis의 값은 0
    */
	flex: 1 1 auto;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
	flex: 1 500px;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: 500px; */
}

• 🌟 여백의 비가 아닌, 영역 자체를 원하는 비율로 분할하기를 원한다면 flex-basis을 0으로 설정

🔸 align-self

• 수직축 정렬 속성
• align-items가 전체 아이템의 수직축 방향 정렬이라면
• align-self는 해당 아이템의 수직축 방향 정렬
• auto(기본값) / stretch / flex-start / flex-end / center / baseline
• align-self는 align-items 속성보다 우선 (원래 전체보다는 개별설정 우선)

🔸 order

• 각 아이템 시각적 나열 순서
• 시각적 순서일 뿐 HTML 자체 구조를 바꾸진 않음

🔸 z-index

• z축 기준 정렬
• 숫자가 클 수록 위로 올라옴 (기본값 0)
• position의 z-index와 사실상 동일

공부자료 출처 : https://studiomeal.com/archives/197