[flex-direction]
row) 한줄에 같이 정렬 (기본값)
- justify-content 가로 작동
- align-items 세로 작동
- flex-grow 가로 작동
column) 한줄에 하나씩 정렬
- justify-content 세로 작동
- align-items 가로 작동
- flex-grow 세로 작동
*reverse를 적용하게 되면 start가 오른쪽 정렬으로 바뀌고 end가 왼쪽 정렬으로 바뀐다.
또한 flex-item의 순서가 바뀐다는 특징이 있다.
https://codepen.io/EONJENOG/pen/wvLgLzj
flex-grow
...
codepen.io
[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을 사용하여 설정한다.
https://codepen.io/EONJENOG/pen/jOjyjdj
그리드 flex-grow 구현
...
codepen.io
https://codepen.io/EONJENOG/pen/abgpemy
flex-grow와 flex-basis
...
codepen.io
[flex-basis]
- 우리가 평소에 사용하는 너비속성과 똑같다.
ㄴ 이름만 width → flex-basis로 사용
ㄴ flex-item너비는 flex-basis를 사용