웹2 2일차

[2일차 1교시]

 

✅flex-direction정렬 복습

 

flex-direction : 배치 정렬
row	한 줄에 같이 배치 inline-block같은 것 justify-content: 가로정렬 align-items: 세로정렬
column	한 줄에 하나씩 배치 block같은 것 justify-content: 세로정렬 align-items: 가로정렬
‼ reverse를 사용하면 요소들의 start와 end의 순서도 뒤바뀜

 

 

✅flex-wrap

 

nowrap	모든 요소들을 한 줄에 정렬
wrap	요소들을 여러 줄에 걸쳐서 정렬
wrap-reverse	요소들을 여러 줄에 걸쳐 반대로 정렬
align-content가 space-around나 space-between일 경우에 사용 가능

 

 

✅flex-grow

 

 

 

 

✅ flex-item끼리 여백을 주고 싶은 경우

 

 

 

 

해결 - flex-container에 gap값을 주면 됨 

( flex-item에 flex-grow값이 설정되어 있다면, 여백까지 고려하여 width가 설정됨)

 

 

✅ flex-basis

 

 

 

해결 - flex-item에 flex-basis:0을 부여하면 됨

(width값에 0을 주어도 되나 나중에 수정하기가 힘들고

추후 반응형에서 문제가 생길 확률이 크다)