이 아이템을 조절해보세요!
1+ 추가 텍스트
2+ 추가 텍스트
3+ 추가 텍스트
위 회색 상자는 flex 컨테이너입니다.
flex-direction 값은 기본(row)입니다.
flex 컨테이너 안 아이템의 속성들
flex-basis는 메인 축상의 길이로, 컨테이너의 flex-direction 값에
따라 너비 또는 높이값으로 작용합니다. 기본값은 auto입니다.
flex-grow는 빈 공간을 채울지 여부, 그리고 채울 시 다른 아이템들의
동 속성값에 비례해서 공백을 나눠갖습니다. 기본값은 0 입니다.
flex-shrink 속성은 전체 공간이 부족할 때, 해당 아이템의 길이가
컨텐츠의 너비 또는 flex-basis로 지정한 값보다 작아질 수 있을지를
지정합니다. 기본값은 1이며, 증가할수록 길이가 많이 줄어듭니다.
위 속성들은 아래와 같이 flex 속성으로 한 줄에 나타낼 수 있습니다.
- flex: (flex-grow 값);
- flex: (flex-grow 값) (flex-basis 값);
- flex: (flex-grow 값) (flex-shrink 값) (flex-basis 값);