CSS flex box

블럭과 인라인

블럭 옆에는  공간이 남아도 아무런 요소가 올수 없고 넓이와 높이를 가질수 잇음

인라인 인라인 컨테츠 끼리는 옆에 올수 있고 컨텐츠의 길이에 따라 높이아 넓이가 결정

 

 

 

음 말대로 잘 됬당 

 

그럼 여기 span 태그를 지우고 div 만 남겨준 상태에서 이 블록을 한줄로 배치 

즉 놃이와 넓이를 가지는 블록 특성을 유지한체 인라인 옆으로 놓고 싶음

 

diplay : inline-block ; 을 써보자

 

 

오 한줄로 잘 배치됨 

근데 잘 사용하지 않음

왜 냐하면 사이 사이 공백이 생기기 때문 브라우저가 자동으로 준 값이라고함

 

그래서 마진으로 적절히 띄어보자

margin 0 50px

 

 

 

오 적당희 띄어짐 

근데  보는 화면따라 달라지기때문에  작으면 저 네모가 내려 갈꺼고 모니터가 크면 더 마진을 줘야 되기때문에 

이런 문제를 해결하기 위해서 display flex 사용

 

 

 

오 화면 작게 했는데도 전부자 나란히 됨 

 자식 div 안에 있는 margin  지우고 다시 보자

왕 겹친채로 나옴 

 

플렉스 컨테이너에는 2가지 축이 있음

 

 

 

justify-content center 를 하니 메인축을기준으로 가운데 로 정렬된걸 알수 있음 

 

div 박스 안에 숫자 넣고 justify-content flex-end 넣어보자

 

 

 

오 끝으로 가는걸 알수 있음

space between도 써보자

 

 

 

 

오 고르게 고르게 분등됨 

justify content 는 메인축을 기준으로함 

 

이상태에서 수평으로 변화를 주고 싶으면 allin-items

 

 

 

교차 축으로 정렬이 잘 된걸 알수 있다

 

flex-end도 써보자

 

 

 

교차축 밑으로 간걸 알수 있다

 

교차 축과 매인축의 위치도 바꿀수 있음

 

flex-direction colum; 써보자 

그다음 중앙으로 놓고 싶으면

    align-items: center;

를 부요 컨테이너에다가 써보자

 

음 이동이 잘됬다 . 근데 굳이 이렇게 까지 해야하나??.. 라는게 내 상각 

메인 축 조정은 justify-content 

교차 축 조정은 alin-items 

근데 이상황에서는 flex-colum 을 썻으니

안에 있는 컨텐츠를 움직이기 위해서는 교차축을 써야 되니 align-items 를 씀 

아 진짜 햇갈리네 ㅡㅡ; 

 

 

 

코드 정리좀 하고 

 

이 상태에서

 

강의 말대로 justifycontent center 를 이용해서 맞춤

 

음 됬당 어우 ㅡㅡ 햇갈려 colum 안쓰고 싶다 절대로 

 

마지막으로 flex wrap 에 대해 살펴보자

 

화면을 줄여도 계속 어떻게든 넣어지고 있음 이걸 넘치면 밖으로 꺼내개 해보고 싶음

부모 컨테이너에 

        /* flex-wrap: wrap; */

 

을 써보자

결과는?

 

됬당ㅅㅅㅅ

어우 햇갈려 ㅡㅡ