[ CSS ] 자식 요소의 width를 부모 요소의 width에 대한 비율로 정하고 싶을 때

Flexbox

flex는 flex-grow, flex-shrink, flex-basis의 단축 속성

즉,

flex: {flex-grow} {flex-shrink} {flex-basis};

 

flex-grow

자식 요소가 부모 요소 내부에서 할당 가능한 공간의 정도

모든 자식 요소의 flex-grow 값이 같으면 동일한 공간을 할당받는다.

 

flex-shrink

자식 요소의 크기가 부모 요소보다 클 때, flex-shrink에 설정된 숫자값에 따라 부모 요소 내부에서 자식 요소의 크기가 축소된다.

 

flex-basis

자식 요소의 초기 크기

• width를 나타내는 단위
  • length
  • percentage
  • auto 키워드
• content 키워드
  • 콘텐츠 크기에 따라 자동으로 크기 설정

 

 

---

 

+

부모 요소가 flex일 때, 자식 요소가 가능한 한 최대 너비를 가지게 하고 싶다면?

(100%와는 의도가 다름)

여러 개의 자식 요소가 있을 때, 각 요소가 가지는 너비는 제외하고 남는 너비를 전부 가지게 하기 위함

1. 부모가 특정한 너비를 가지고 있어야 한다.
2. 자식에게는 flex: 1 속성 부여
   1. flex에 작성한 값이 하나이고 number이면 flex-grow 속성을 의미한다.
   2. 즉, 자식 요소가 부모 요소의 가용 공간에서 할당 가능한 공간의 정도

div {
  ${flexBox()};
  gap: 1rem;
  width: 100%;

  hr {
    flex: 1;
    height: 0.5px;
    border: none;
    background-color: ${({ theme }) => theme.colors.grayBg};
  }
}