자바스크립트로 가기전에 CSS에서 가장 중요하다고 생각했던 Flex에 대해 깊게 탐구해봤다.
이렇게 Flex를 제대로 분석해서 공부를 해본적은 처음이었지만 엄청 어렵지는 않았다!
Flex를 위주로 사용해서 만든 사이트
배운내용들
위에 내용에서는 flex-grow, flex-basis등의 내용을 안 쓰고 만들었기 때문에 그 내용들에 대해서도 여기에 적어보려고 한다.
flex 수직과 수평정렬
가장 보편적인 방법인 justify-content 와 align-items가 있다
justify-content는 main axis를 움직이는 거고
align-items는 cross axis를 움직이는 거다!!
이 말이 flex를 이해하는 가장 큰 핵심이라 생각한다!!
flex에서 기본은 가로축으로 나열이어서 main axis가 가로이다!!
하지만 column이 되버리면 수직으로 바뀌기 때문에 main axis가 세로이다!!
그렇기에 이때는 align-items로 가로를 조정한다!! 둘이 뒤바뀌어버리는것!
justify-contents
start: main axis의 가장 왼쪽으로 간다
end: main axis의 가장 오른쪽으로 간다
space-between: 양끝으로 각각의 요소들이 이동!! 양옆에 남는거 없다!
space-around: 양끝으로 이동 ==> start 와 end크기만큼 남기고 옆으로 간다! 이게 차이!!!
flex-grow, flex-basis, flex-shrink
flex의 크기를 정하는 삼대장(?)느낌이었다 ㅋㅋ
flex-basis
flex-basis : 100px;flex-basis은 axis 방향으로 크기를 늘려준다!!! -> 이게 중요!
100px이 가장 작은 크기라고 생각하면 편하다 -> 그 이하로는 안줄어든다!
flex-grow
화면의 비율이 flex-grow:1로 모두를 설정하면 같은 비율로 만들어진다!!
flex-grow에 따라 다르게 비율을 줄 수 있다!!
flex-shrink
기본이 flex-shrink: 1;인 녀석인데 속성이 0이 되면 괴팍해진다ㅜㅡㅜ
공간을 줄일때 유연하게 flex-shrink비율 만큼 줄어들수가 있다!
그래서 0이면 안줄어든다!
flex-wrap
flex-wrap: wrap;wrap하게 되면 -> 요소들의 크기가 화면보다 많아서 넘어갈경우!!
아래로 정렬한 방식대로 넘겨준다!!
justify-content: center방식이면 중앙으로 내려고오 start면 왼쪽에 붙는다!
float
float: leftfloat은 우리가 css로 정한 요소들 다음으로 오는 element에게 옆에 붙으라고 해주는 녀석이다!!
:nth-child() / :nth-of-type(3) / ::after / order
:nth-child() 와 :nth-of-type(3)
둘의 차이는 조건을 충족했냐 안했나의 차이!!!
.item:nth-child(3)
.item:nth-of-type(3)이렇게 되면 nth-of-type(3)은 .item이라는 클래스중에서 3번째인 요소에게 css스타일을 지정해준다!
nth-child(3)은 그냥 부모요소의 n번째 자식을 선택해서 스타일링 해준다!
.item::after
after는 선택한 요소의 맨마지막 자식으로 의사요소를 하나 생성!!
즉 마지막이 block이니까 다음에 오는 다른 요소는 아래에 생성된다!!
flex-container::after {
content: '';
clear: both;
display:block;
}order, align-self
.item:nth-of-type(2) {
flex-grow:3;
align-self: start;
order:1;
justify-self: center;
}이거는 심화 내용인데 align-self는 flex안에 있는 요소 중 이것 하나만 다르게 cross-axis를 줄 수 있게 해준다
justify-self: center;또한 마찬가지이다
order는 각각의 flex안에 요소들 중에 몇번째로 나타낼지 순서를 정해준다 2번째에 있지만 order가 1이기 때문에 첫번째로 온다!
피드백
내가 만든 것은 클론코딩이기에 아직 완전히 내것이 아니다!!
꼭 다시 한번 만들어보자!! CSS의 flex박스를 중점으로!
