[flex-direction]
row) 한줄에 같이 정렬 (기본값)
-justify-content 가로 작동
-align-items 세로 작동
-flex-grow 가로 작동
column ) 한줄에 하나씩 정렬
- justify-content 세로 작동
-align-items 가로 작동
-flew-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 너비를 fleex-basis 를 사용
-