웹 _ 011일차

[ flex-direction ]

row(행)) 한줄에 같이 정렬(기본값)

 - justify-content 가로 작동

 - align-items 세로 작동

 - flex-grow 가로 작동

 

column(열)) 한줄에 하나씩 정렬

 - justify-content 세로 작동

 - align-items 가로 작동

 - flex-grow 세로 작동

 

*reverse를 적용하게 되면 start가 오른쪽 정렬로 바뀌고 end가 왼쪽 정렬로 바뀐다.

flex-item 순서가 바뀐다는 특징이 있다.

 

[ flex-grow ] 너비를 설정하는 속성

 - flex-container 너비를 활용한 속성

    ㄴ flex-container안에서만 사용할 수 있다.

    ㄴ 다 사용하고 남는 공간만 사용한다.

 - 값을 1부터 N값까지 사용 가능하다.

    ㄴ flex-item에 너비를 각각 설정할 수 있기 때문에 flex-item에 직접 적용한다.

- 안쪽 요소 크기에 따라서 비율이 달라진다.

   ㄴ flex-basis: 0; 이라는 코드와 함께 사용하면 해결할 수 있다.

   ㄴ 비율을 맞추기 위해서는 flex-grow: 1;이 적용된 flex-item에 전부 flex-basis: 0;을 사용해야된다.

 - 1:1비율을 맞췄을 때 안쪽 요소가 너무 크면 그 크기에서 크기가 머무른다.

   ㄴ 무조건 원하는 고정 px이 있을 때는 flex-grow대신 고정px을 사용하여 설정한다.

 

[ flex-basis ]

 - 우리가 평소에 사용하는 너비속성과 똑같다.

   ㄴ 이름만 width → flex-basis로 사용

   ㄴ flex-item너비를 flex-basis를 사용

 

padding은 안쪽(입는 패딩 생각하면 편함)

margin은 바깥쪽