이때, 부모 셀렉터 안에 flex 속성을 넣어 주고, 내가 원하는 자식 셀렉터 안에 내부 속성을 정하게 된다.
위의 상황에서 내가 원하는 컨텐츠는 부모 셀렉터가 아까 자식 셀렉터인 셀렉터 안에 있게 된다.
그러므로 아까의 자식 셀렉터에 justify-content로 수평 정렬, align-items로 수직정렬을 해주면 가장 가운데에 콘텐츠가 자리하게 된다.
2. flex 의 세부속성
flex는 세부 속성으로 아래의 3개를 가지고 있다.
'flex-조절을 원하는 세부속성: 수치'로 사용한다.
flex는 화면의 사이즈에 따라 사이즈를 정하고, 화면이 작아지면 안의 콘텐츠도 작아진다.
basis : 선택된 아이템의 기본 크기를 정해준다. ( nth-child(원하는 번째의 아이템)을 사용하면 지정한 아이템만 사이즈를 설정할 수 있다. )
grow : 남은 여백을 가져간다. ( 어떤 박스 안에 아이템이 있을 경우, 그 박스를 가득 채우도록 여백을 가져간다는 의미이다. 특정한 아이템을 지정하지 않으면 남은 여백을 똑같이 가져가고, 마찬가지로 nth-child로 설정하면 원하는 아이템만 늘어나 여백을 채우게 될 것이다. 즉 비율로 움직인다. )
shirink : 만약, 화면보다 flex의 사이즈가 작아진다면, 콘텐츠의 사이즈도 작아질 것이다. 이때,shrink 를 이용하면, 화면이 작아져도 줄어들지 않고 컨텐츠가 사라진다. ( 수치를 0으로 정해주면 줄어들지 않는다. 수치를 늘려놓으면 그 비율만큼 줄어들 것이다. 이를 '줄어들 경우 영향을 받는다' 라고 생각한다면, 아이탬들 마다 shrink 값을 달리해서 화면이 줄어 들었을때 컨텐츠의 사이즈를 콘텐츠마다 다른 비율로 줄여 화면 안에서 내가 원하는 아이템은 줄어들지 않게 하고, 다른 아이템들은 줄여서 화면을 맞춰 줄 수 있다. )
3. 다양한 크기의 단위
em : 현재 폰트 사이즈를 나타내는 단위. 부모의 폰트 사이즈를 곱한 값이 된다.
rem (root em) : 최상위 요소인 html의 폰트 사이즈를 곱한 값이다.
vh, vw (vertical height & vertical width) : 브라우저, 즉 내가 보고 있는 화면의 100 분의 1 단위.