다시 CSS로 돌아와서 헷갈리는 것을 정리하고자 한다.
CSS flex는 element들의 위치를 쉽게 잡아주는 속성이다.
그리고 레이아웃을 구성하거나 요소들의 위치를 변경하려
할 때 등 편리하게 사용할 수 있다.
또 부모와 자식요소가 꼭 있어야한다.
위치를 변형하고 싶은 요소의 부모요소에 display:flex;를 사용해야 하기 때문임/
속성 : 의미
display : flex container를 정의한다.
justify-content : 가로 축의 정렬 방법을 설정한다
align-content : 2줄 이상의 세로 축 정렬 방법을 설정한다
align-items : 1줄의 세로축 items의 정렬 방법을 설정한다
<하지만 이거보다 더 많이 flex를 사용하는 속성들이 있다 일단 이거만 좀 알자>
justify-content (가로 축의 정렬 방법)
flex-start: 요소들을 컨테이너의 왼쪽으로 정렬한다.
flex-end: 요소들을 컨테이너의 오른쪽으로 정렬한다.
center: 요소들을 컨테이너의 가운데로 정렬한다.
space-between: 요소들 사이에 동일한 간격을 둔다.
space-around: 요소들 주위에 동일한 간격을 둔다.
align-items (세로 축의 정렬 방법)
flex-start: 요소들을 컨테이너의 가장 위로 정렬한다.
flex-end: 요소들을 컨테이너의 가장 아래로 정렬한다.
center: 요소들을 컨테이너의 세로 축 상의 가운데로 정렬한다.
baseline: 요소들을 컨테이너의 시작 위치에 정렬한다.
stretch: 요소들을 컨테이너에 맞도록 늘린다.
flex-direction (item을 정방향,역방향으로 정렬하는 방법)
row: 요소들을 가로 축 정방향으로 정렬한다.
row-reverse: 요소들을 가로 축 역방향으로 정렬한다.
column: 요소들을 위에서 아래로 정방향 정렬한다.
column-reverse: 요소들을 아래에서 위로 역방향 정렬한다.
