<Container>
<div className="logo">
<Link href="/" passHref>
<a>
<Logo src="/commons/Logo@2x.png" alt="logo" />
</a>
</Link>
</div>
<a onClick={() => setSearchVisible(visibleTo)}>
<Icon src={src} alt={alt} />
</a>
</Container>컨테이너 안에 크게 로고와, 메뉴버튼 두 가지의 요소가 들어있다.
이 때 이 두 가지를 아래 사진과 같이 양쪽 끝에 정렬하고 싶은데 잘 되지 않았었다.
이 때 로고에 flex-start 를 준 상태에서 flex: 1 을 주고 난 후 양쪽 정렬이 되었다.
const Container = styled.nav`
position: fixed;
top: 0;
left: 0;
left: 0;
right: 0;
/* background-color: ${COLORS.WHITE}; */
z-index: 1;
height: 80px;
display: flex;
flex-direction: row;
align-items: center;
padding-left: 24px;
.logo {
flex: 1;
display: flex;
flex-direction: row;
justify-content: flex-start;
}
a {
display: flex;
cursor: pointer;
}
`;
그렇다면 flex: 1 속성은 무엇일까? 다시 정리해보려고 한다.
Flex
flex 는 단축 표현으로, 이 안에는 flex-grow, flex-shrink, flex-basis 라는 표현이 함축되어 있다.
1. flex-grow
- flex-basis (flex item의 기본 크기)보다 늘어날 수 있는지 결정하는 속성이다.
- 디폴트 값은 0으로, inflexible한 상태를 의미한다. (=즉, 화면이나 플렉스 컨테이너의 너비 변경과 상관없이 원래의 크기를 유지한다.)
- flex-grow의 값은 flex-basis 를 제외한 나머지 여백을 해당 비율로 나눠 갖겠다는 의미이다.
- flex-grow 속성의 값으로 1 이상의 숫자가 오게 되면, 화면의 넓이에 따라 유동적으로 변화한다. (flexible)
2. flex-shrink
- flex-basis (flex item의 기본크기)보다 줄어들 수 있는지 결정하는 속성이다.
- 디폴트 값은 1로, 1이상의 값이 주어지면 해당 비율로 줄어들 수 있음을 의미한다. (flexible)
- 값이 0이 된다면, flex-basis 보다 줄어들지 않으므로 고정 너비를 설정할 수 있다. (inflexbile)
3. flex-basis
- flex item 의 기본 크기를 결정하는 속성이다.
- 디폴트 값은 auto 로, 컨텐츠 너비만큼을 의미한다.
- flex-direction 이 row 일 때는 너비, column 일 때는 높이를 의미한다.
- 단위로는 px, %, rem 등 모든 단위를 사용 가능하다.
- flex-basis 속성의 값을 30px이나 30%와 같이 설정하면 flex item의 크기가 고정된다.
- flex-basis 속성에서 자주 사용되는 속성값은 auto 와 0 인데, 0으로 설정하게 되면 flex item은 절대적 flex item이 되어 (absolute flex item) flex container 를 기준으로 크기가 결정된다.
- 이 때 px 이나 %와 같이 단위도 함께 설정해야 한다.
flex: 1
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;flex: 1 은 위의 코드를 의미한다.
즉, flex-basis 가 0이므로 점유 크기를 0으로 만든 후 화면 비율에 따라 유연하게 늘어나거나 줄어들 수 있음을 만드는 속성이다.
출처/참고