[CSS]flexbox

✅justify-content

flexbox안에 있는 요소들이 x축으로 어떻게 놓여질 것인지 결정하는 property.

만약 flex-direction이 row라면 y축을 기준으로 움직인다.

✅align-itmes

y축을 기준으로 요소들이 어디에 놓을지 결정. 마찬가지로 direction이 row일때는 x축을 기준으로 한다.

요소들은 화면의 정가운데 놓고 싶다면 align-itmes와 justify-content 둘다 center로 값을 주면 된다.

✅wrap

부모요소의 너비보다 요소들의 너비의 합이 더 클 때(부모요소의 너비를 넘어갈 때) 요소를 어떻게 display할 지 결정함.

wrap은 다음 줄로 넘어가게 하고 nowrap은 자식요소들의 너비를 줄여서 부모요소의 너비에 맞춘다. 

✅flex-shrink

마찬가지로 부모요소의 너비 < 자식요소의 너비의 합 일 때,

wrap 속성이 들어가있다면 어떤 비율로 줄어들지 값을 줄 수 있다. 자식요소에 각각 주어야하는 속성

 

✅flew-grow

flex-shrink와 반대로 부모요소의 너비 > 자식요소의 너비의 합 일 때,

자식요소가 어떤 비율로 늘어날지 결정하는 속성. 마찬가지로 자식요소에 각각 속성을 주어야 한다.

✅flex-basis

자식요소의 너비를 결정하는 속성. width와 동일하지만 flexbox안에서만 쓸 수 있는 속성이다.

%,px,auto로 지정할 수 있다.

자식요소에 각각 지정해줘야 함. 기본값은 auto

✅align-self

align-items와 같지만 부모요소가 아닌 자식요소에 붙여서 개별적으로 원하는 위치에 지정시킬 수 있다.

속성의 값도 align-items와 같다.