웹1 9일차

 

[1교시 flex의 개념]

✅높이

모든 태그는 높이가 auto(기본값)일 때 0으로 작동한다
flex-item이 되면 높이가 auto(기본값)일 때 상위 엘리먼트의 100%으로 작동한다

 

• 예제로 확인하기 

1번부터 5번 네모박스 중 하나만 값이 설정되어 있어도

다른 네모박스도 동일한 값을 상속받게 됨 (flex의 상속을 하고, 상속을 받는 특성)

 

---

 

[2교시 flex-container / flex-item]

 

✅ flex- container

1. item을 정렬하는 코드는 전부 flex-container에 작성된다
   * justify-content : 가로정렬
   *align-items : 세로정렬
   *flex-direction : 방향정렬
   *flex-wrap : 줄바꿈 정렬(반응형)
   *align-cotent : 줄바꿈이 되었을 때 정렬(반응형)
2. dispaly - flex가 적용된 엘리먼트를 flex- container라고 부른다.
   *브라우저에서 도형취급을 받는다 *margin-left:auto;와 margin-right:auto;로 정렬한다
3. width: auto일때 100%으로 작동한다

 

1.  

✅ flex- item

1. display-flex가 적용된 엘리먼트의 [자식만] flex-item이라고 부른다.
2. width가 auto일때 0으로 작동한다
3. height가 auto일때 100%으로 작동한다
4. text-align을 사용해서 정렬할 수 없다
5. flex-item의 크기를 직접적으로 커스텀하는 속성은 flex-item에 직접 적용한다
6. align-items가 적용된 align-item 은 height가 auto일 때 0으로 작동한다

✅plus 개념

flex-item이 auto일 때	align-items 적용 ⭕	height: auto=0
	align-items 적용 ❌	height: auto=100

❓ flex-container 높이 = flex-item 높이가 같을 때

[문제점]
높이가 같아서 정렬할 수 없다
[해결 방안]
flex-container가 강제로 flex-item높이를 작게 만들어서 원하는 위치로 정렬시킨다

 

*flex-grow : 비율

*flex-basis : 비율 설정

*flex-shirnk : 고정 설정

 

✅flex-direction 방향

flex-direction	row	justify-content : 가로정렬 align-items : 세로정렬 flex-grow : 가로에서 작동
	column	justify-content : 세로정렬 align-items : 가로정렬 flex-grow : 세로에서 작동

 

 

---

 

[3교시 flex-direction 방향과 justify-content, align-items 응용하는 연습]

 

->구글시트에 있는 개구리 연습 이동하기

Flexbox Froggy

 

---