[1분코딩] CSS Flex와 Grid 제대로 익히기 #01 (Flex 핵심정리)

👉인프런에서 수강하는 1분코딩 강의 노트

flex는 html, css 하면서 한 번 공부했는데 Grid는 해본 적이 없어서

flex 복습 겸 grid 공부! 새로 알게된 내용도 있어서 신기ㅎㅎ

출처 : 1분코딩 블로그 https://studiomeal.com/archives/197

---

Flex 레이아웃을 만들기 위한 기본적인 HTML 구조

<div class="container"> <!-- 부모요소 - flex의 영향을 받는 전체 공간 -->
	<div class="item">Hello</div> <!-- 자식요소 - 설정된 속성에 따라 각각의 아이템들이 배치-->
	<div class="item">flex</div> <!-- 자식요소 -->
	<div class="item">bye</div> <!-- 자식요소 -->
</div>

---

Flex 컨테이너에 적용하는 속성들

display : flex

• 아이템들은 가로 방향(기본)으로 배치됨
• 자신이 가진 내용물의 width 만큼만 차지하게 됨 (inline 요소처럼)
• height는 컨테이너의 높이만큼 늘어남
• inline-flex도 있는데, 이건 block과 inline-block의 관계와 같음
• 아이템들이 배치된 방향의 축을 메인 축 (Main Axis)
• 메인축과 수직인 축을 수직축 또는 교차축(Cross Axis)

flex-direction : row, column, row-reverse, column-reverse

• row : 가로방향 (기본값)
• column : 세로 방향
• row-reverse : 역순 가로방향
• column-reverse : 역순 세로 방향

flex-wrap : 컨테이너가 아이템들을 한 줄에 담을 여유공간이 없을 때, 아이템 줄 바꿈을 어떻게 할지 결정하는 속성

• nowrap : 줄바꿈 하지 않음(기본값)
• wrap : 줄바꿈
• wrap-reverse :  줄 바꿈, 아이템 역순 배치

flex-flow :  flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성 

justify-content : 메인 축 방향 정렬

• flex-start : 시작점으로 정렬 (기본값)
• flex-end :  끝점으로 정렬
• center : 가운데 정렬
• space-between :  사이(between) 간격을 균일하게 정렬
• space-around : 둘레(around) 간격을 균일하게 정렬
• space-evenly : 아이템들의 사이와 양 끝의 간격을 균일하게 정렬 (IE와 엣지에선 지원되지 않음)

align-items : 수직축 방향 정렬 / align-content : 여러 행 정렬

• stretch : 수직축 방향으로 늘어남(기본값)
• flex-start : 시작점으로 정렬
• flex-end : 끝점으로 정렬
• center : 가운데 정렬
• baseline : 텍스트 베이스라인 기준 정렬

---

Flex 아이템에 적용하는 속성들

flex-basis : 아이템의 기본 크기 설정 (row일 때는 너비, column일 때는 높이)

flex-grow : 아이템이 flex-basis의 값보다 커질 수 있는지 결정하는 속성, 0보다 큰 값이 세팅되면 유연한 박스로 변하여 원래 크기보다 커져 빈 공안을 메움, 기본값은 0

(들어가는 숫자의 의미는 아이템들의 flex-basis를 제외한 여백 부분을 지정된 숫자의 비율로 나누어 가짐)

flex-shrink : 아이템이 flex-basis의 값보다 작아질 수 있는지 결정하는 속성, 0보다 큰 값이 세팅되면 유연한 박스로 변하고 flex-basis보다 작아짐, 기본값은 1이기 때문에 따로 세팅하지 않아도 flex-basis보다 작아질 수 있음

flex :  flex-grow, flex-shrink, flex-basis를 한 번에 쓸 수 있는 축약형 속성 (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; */
}

align-self : 수직축으로 아이템 정렬 (align-ietems가 전체 아이템이라면 align-self는 해당 아이템)

• align-items보다 우선권이 있음
• auto : align-items의 설정 상속(기본값)
• stretch : 수직축 방향으로 늘어남
• flex-start : 시작점으로 정렬
• flex-end : 끝점으로 정렬
• center : 가운데 정렬
• baseline : 텍스트 베이스라인 기준 정렬

order : 각 아이템들의 시각적 나열 순서를 결정하는 속성(=배치 순서), 숫자 값이 들어가며, 작은 숫자일수록 먼저 배치 (html 자체 구조를 바꾸는 것은 아님)

z-index :  Z 축 정렬, 숫자가 클수록 위로 올라옴

---

말 줄임표 만들기 (세가지 속성은 세트로 그냥 외우자!)

.user-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}