하와이 가는 여정

flex containe의 프로퍼티를 배웠다면 이제 flex item 차례이다. flex item의 프로퍼티는 display: flex 가 적용된 부모 요소의 자식 요소에만 사용할 수 있다. flex-grow flex-grow는 이름 그대로 flex item의 확장과 관련이 있다. 단위 없는 숫자 값(비율)을 사용하며 기본값은 0이다. 값이 0일 경우 flex container가 커져도 flex item의 크기는 커지지 않고 원래 크기를 유지한다. 하지만 값이 1 이상일 경우 flex item의 원래 크기와 상관없이 flex container를 채우기 위해 flex item도 커지게 된다. 1 0 1 1 1 1 2 1 .container { background-color: skyblue; height: ..

flexbox는 크기가 불분명한 요소들에 대해 효율적으로 동작하고, 특별한 계산 없이 쉽게 정렬할 수 있다. flexbox는 아래와 같이 부모 요소인 flex container와 자식 flex item으로 구성되어있다. flexbox를 사용하려면 정렬하고자 하는 요소의 부모 요소인 flex container에 display: flex; 를 추가하면 된다. display: flex; 를 사용하지 않으면 flex를 사용할 수 없다. display: flex; .parent { /* 배치, 정렬하고자 하는 요소를 감싸는 부모 요소 */ display: flex; } .child { /* 배치, 정렬하고자 하는 대상 요소 */ ... } flexbox는 기본적으로 가로 혹은 세로로 정해둔 방향을 기준으로 프로퍼..